html, body{
    position: relative;
    height: 100dvh;
}
body{
    color: #2C0D2C;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    -webkit-transition: background 0.5s ease;
    -moz-transition: background 0.5s ease;
    -ms-transition: background 0.5s ease;
    -o-transition: background 0.5s ease;
    transition: background 0.5s ease;
    margin: 0;
    border: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);

 }

/*
 * Novo painel
*/
:root {
    --altura-header-footer: 115px; /* Ajuste conforme necessário */
    --altura-header-body:   234px; /* Ajuste conforme necessário */
    --altura-header-search: 378; /* Ajuste conforme necessário */
    --fixed-footer-space: calc(64px + env(safe-area-inset-bottom, 0px));
    --registration-header-space: 56px;
    --registration-safe-top: env(safe-area-inset-top, 0px);
}

.h-100 {
    flex-grow: 1; /* Substitui height: 100% caso os pais não tenham altura definida */
}

/*
 * Preload
*/

.loader-container {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background: #2C0D2C;
    transition: opacity .5s ease-out;
    opacity: 1;
    z-index: 10000;
}

.loader-container-hidden {
    opacity: 0;
    pointer-events: none;
}

.ripple {
    position: relative;
    width: 50px;
    height: 50px;
}

.ripple::before, .ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid #FF5C35;
    opacity: 0;
    animation: ripple 3s infinite;
}

.ripple-dark::before,
.ripple-dark::after{
    border-color: #2C0D2C;
}

.ripple::after {
    animation-delay: 1.5s;
}

@keyframes ripple {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}
/*Fim preload*/


.alert-bell{
    padding-top: 20px;
    text-align: center;
}
.bell {
    fill: #2C0D2C;
    transform-origin: top;
    width: 132px;
    animation: ring .5s linear -1ms infinite alternate;
}

.line {
    fill: transparent;
    stroke: #2C0D2C;
    stroke-width: 3;
    stroke-linecap: round;
    position: absolute;
    opacity: 0;
}

.line-1,
.line-2,
.line-3 {
    right: 150px;
    animation: sound-1 1s linear infinite;
}

.line-4,
.line-5,
.line-6 {
    left: 150px;
    animation: sound-2 1s linear infinite;
}

.line-1,
.line-4 {
    animation-delay: 1;
}

.line-2,
.line-5 {
    animation-delay: 1.6s;
}

.line-3,
.line-6 {
    animation-delay: 2.6s;
}

/*keyframes*/

@keyframes sound-1 {
    100% {
        transform: translateX(60px) scale(1.6);
        opacity: 1;
    }
}

@keyframes sound-2 {
    100% {
        transform: translateX(-60px) scale(1.6);
        opacity: 1;
    }
}

@keyframes ring {
 0%, 50% {
    transform: rotate(0);
}
1%, 10%, 20%, 30%, 40% {
    transform: rotate(10deg);
}
5%, 15%, 25%, 35%, 45% {
    transform: rotate(-10deg);
}
}
.chat-tela i{
    font-size: 70px;
    color: #EF7926;
}

.chat-tela p{
    font-size: 15px;
    margin-top: 10px;
}

.chat-opening-screen{
    color: #2C0D2C;
}

.chat-opening-logo{
    width: 146px;
    max-width: 52vw;
    height: auto;
}

.chat-opening-channel{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.chat-opening-channel p{
    margin-bottom: 0;
    font-size: 15px;
    color: #EF7926;
    font-weight: 600;
}

.chat-opening-question{
    border: 1px solid rgba(44, 13, 44, 0.18);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(44, 13, 44, 0.12);
    min-height: 110px;
}

.chat-opening-footer{
    padding-top: 8px;
}

.chat-opening-notice{
    margin: 0 0 16px 0;
    border-radius: 12px;
    border: 1px solid rgba(239, 121, 38, 0.35);
    background: rgba(239, 121, 38, 0.14);
    color: #2C0D2C;
    font-weight: 600;
}

.chat-opening-actions{
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.chat-opening-actions .btn{
    min-height: 48px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
}

/* Passar no nosso padrao "Voltar": contorno laranja, hover preenche. */
.btn-opening-pass{
    border: 1.5px solid #EF7926;
    color: #EF7926;
    background: transparent;
}

.btn-opening-pass:hover,
.btn-opening-pass:focus{
    background: #EF7926;
    color: #ffffff;
}

.btn-opening-answer{
    border-color: #EF7926;
    color: #fff;
    background: #EF7926;
}

.btn-opening-answer:hover,
.btn-opening-answer:focus{
    background: #dc6f23;
    border-color: #dc6f23;
    color: #fff;
}

.chat-advg-question{
    background: #FFFFFF;
    border: 1px solid #000000;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 20px
}

.chat-advg-question-time h3{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
}
.chat-advg-question-time time{
    font-size: 32px;
    font-weight: 700;
}



body.recover{
    background: #2C0D2C;
}

header.header{
    background: #2C0D2C;
    min-height: 56px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-right: calc(15px + env(safe-area-inset-right, 0px));
    padding-left: calc(15px + env(safe-area-inset-left, 0px));
}

header.header .nav-top{
    display: flex;
    align-items: center;
}

header.header .nav-top .btn-carteira{
    border: 1px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
}
header.header .nav-top .btn-carteira svg{
    height: 18px;
    margin-right: 5px;
}


.toggler-buttom{
    width: 20px;
}

header.header.header-logo-central .toggler-buttom{
    width: 104.5px;
}



header.header nav{
    flex: 1 0 0%;
    justify-content: center;
}

footer{
    background: #2C0D2C;
    color: #ffffff;
    font-size: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding-top: 15px;
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
}

footer.footer.fixed-bottom{
    z-index: 99999999;
}

.footer img{
    max-width: 130px;
}
a, h2{
    color: #EF7926;
}

.card-body a:not(.btn){
    color: #2C0D2C;
    text-decoration: none;
}

h2{
    font-weight: 700;
    font-size: 24px;
}

form label{
    font-size: 15px;
    margin-left: 15px;
}

form .form-control{
    background: #FFFBFF;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    border-color: #ffffff;
    font-size: 15px;
}
form select.form-control{
    min-height: 48px;
}
/* Foco INTERNO (inset) na cor da marca: o anel padrao do Bootstrap ia para fora
   do input (0 0 0 .25rem) e era cortado pelo overflow:hidden do owl-carousel.
   O inset fica dentro dos limites do input, entao nunca e cortado. */
form .form-control:focus{
    border-color: #EF7926;
    box-shadow: inset 0 0 0 1.5px rgba(239, 121, 38, 0.55);
    outline: none;
}
/* Estado de erro (is-invalid) com o mesmo padrao do foco: anel INTERNO vermelho,
   sem o glow padrao do Bootstrap que ia para fora e era cortado pelo overflow. */
form .form-control.is-invalid,
form .form-control.is-invalid:focus{
    border-color: #B5190F;
    box-shadow: inset 0 0 0 1.5px rgba(181, 25, 15, 0.55);
    outline: none;
}

.text-warning{
    color: #EF7926!important;
}
.text-danger{
    color: #B5190F;
}

.bg-primary{
    background-color: #2C0D2C!important;
}


.form-control:disabled, .form-control[readonly]{
    background: #f1f3f5;
}
.form-control[data-readonly="true"]{
    background: #f1f3f5;
    pointer-events: none;
}

.toggle-password{
    cursor: pointer;
}

.toggle-password i{
    pointer-events: none;
}

.btn{
    border-radius: 5px;
    font-weight: 700;
}

.btn-warning{
    border-color: #EF7926;
    color: #ffffff;
    background-color: #EF7926;
}

.btn-primary{
    border-color: #2C0D2C;
    color: #ffffff!important;
    background-color: #2C0D2C!important;
}

/* Padrao GLOBAL de CTA: botoes de acao solidos (warning/primary) com tamanho e
   cantos consistentes. Exclui .btn-sm (acoes pequenas) e nao afeta botoes outline.
   Altura 46px, cantos 10px (igual inputs/cards), texto centralizado. */
.btn-warning:not(.btn-sm),
.btn-primary:not(.btn-sm){
    min-height: 46px;
    border-radius: 10px;
    padding: 0.5rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-check:active+.btn-warning,
.btn-check:checked+.btn-warning,
.btn-warning.active,
.btn-warning:active,
.show>.btn-warning.dropdown-toggle {
    color: #ffffff;
    background-color: #EF7926;
    border-color: #EF7926;
}

.registration-screen .text-warning,
.registration-screen .toggle-password,
.registration-screen a:not(.btn),
.registration-screen h2 {
    color: #B94B0C !important;
}

.registration-screen .btn-warning,
.registration-screen .btn-warning:active,
.registration-screen .btn-warning:focus,
.registration-screen .btn-warning:hover {
    background-color: #B94B0C;
    border-color: #B94B0C;
    color: #ffffff;
}

body.registration-body {
    background: #2C0D2C;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 0;
    padding-bottom: 0;
    scroll-padding-top: calc(var(--registration-header-space) + var(--registration-safe-top) + 16px);
}

body.registration-body #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    min-height: calc(var(--registration-header-space) + var(--registration-safe-top));
    padding-top: var(--registration-safe-top);
}

body.registration-body .registration-screen {
    align-items: flex-start !important;
    background: #ffffff;
    height: auto;
    min-height: calc(100dvh - var(--registration-header-space) - var(--registration-safe-top));
    margin-top: var(--registration-header-space) !important;
    margin-top: calc(var(--registration-header-space) + var(--registration-safe-top)) !important;
    overflow: visible;
    overscroll-behavior: auto;
    padding-top: 36px !important;
    padding-bottom: calc(var(--fixed-footer-space, 72px) + 40px) !important;
    scroll-margin-top: calc(var(--registration-header-space) + var(--registration-safe-top) + 16px);
}

.registration-legal-acceptance {
    max-width: 720px;
}

.registration-legal-acceptance label {
    line-height: 1.45;
}

.registration-legal-acceptance input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 3px;
}

.registration-screen .owl-item:not(.active) {
    visibility: hidden;
}

.registration-screen .owl-item.active {
    visibility: visible;
}

/* Recover: conteudo num card branco que preenche entre header e footer (igual login).
   Usa 100dvh (nao vh-100) para nao "dancar" no mobile com a barra de endereco. */
main.recover .card-body{
    min-height: calc(100dvh - 110px);
    padding-top: 50px;
    padding-bottom: calc(env(safe-area-inset-bottom) + 50px) !important;
}

.options-advogados label{
    display: flex;
    padding: 35px 20px;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    border: 1px solid #2C0D2C;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin-left: 0;

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;

    cursor: pointer;
}

.options-advogados label:hover,
.options-advogados label:focus,
.options-advogados label.current{
    background-color: #2C0D2C;
    color: #ffffff;
}

.options-advogados label input{
    border-color: #2C0D2C;
    width: 15px;
    height: 15px;
}


.owl-carousel .owl-item img{
    width: auto;
    display: inline-block;
}





.theme-roxo{
    background-color: #2C0D2C;
}

.adv-head-profile > .image-profile {
    margin-bottom: 10px;
}

.adv-head-profile h2{
    color: #EF7926;
    font-weight: 400;
    font-size: 15px;
}

.adv-head-profile p{
    color: #ffffff;
    font-weight: 700;
    font-size: 32px;
}

.card-body{
    border-radius: 20px 20px 0 0;
    background-size: cover;
    background: #ffffff;
}


.card-body .adv-head-profile h2{
    color: #2C0D2C;
    margin: 0;
}

.card-body .adv-head-profile p,
.card-body .adv-head-profile h2{
    color: #2C0D2C;
}


/* Container principal */
.nav-card-home {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Header perfil */
main.home .adv-head-profile .text-center.my-5 {
    margin: clamp(1rem, 2.5vh, 3rem) 0 !important;
}

main.home .adv-head-profile h2 {
    margin-bottom: 6px;
}

main.home .adv-head-profile p {
    margin: 0;
    line-height: 1.1;
    font-size: clamp(28px, 3.4vw, 32px);
}

/* Cards / Botões */
.nav-card-home .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

    width: 100%;
    min-height: clamp(76px, 11vh, 100px);
    padding: clamp(12px, 1.6vh, 15px) 20px;

    font-size: clamp(18px, 2vw, 20px);
    color: #241024;

    border-radius: 10px;
    border: 1px solid rgba(44, 13, 44, 0.12);

    background: linear-gradient(180deg, #ffffff 0%, #faf6fb 100%);
    box-shadow: 0 10px 22px rgba(18, 6, 18, 0.10), 0 2px 4px rgba(18, 6, 18, 0.05);

    transition: all 0.2s ease;
}

/* Ícones e texto */
.nav-card-home .btn .label-icone {
    color: #241024;
}

.nav-card-home .btn .icone svg path {
    fill: #341034;
}

/* Hover */
.nav-card-home .btn:hover,
.nav-card-home .btn:focus,
.nav-card-home .btn:active,
.button-icone.box-shadow:hover,
.button-icone.box-shadow:focus,
.button-icone.box-shadow:active,
.btn.btn-cards:hover,
.btn.btn-cards:focus,
.btn.btn-cards:active{
    background: linear-gradient(180deg, #ffffff 0%, #f7eff9 100%);
    box-shadow: 0 12px 24px rgba(18, 6, 18, 0.12), 0 2px 6px rgba(18, 6, 18, 0.06);
    border-color: rgba(44, 13, 44, 0.16);
    transform: translateY(-2px);
}

.nav-card-home .btn .home-pending-dot{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #EF7926;
    box-shadow: 0 0 0 2px #ffffff;
    pointer-events: none;

    animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 0 rgba(239, 121, 38, 0.7);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 8px rgba(239, 121, 38, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 0 rgba(239, 121, 38, 0);
    }
}


.nav-card-home .btn .microcopy{
    display: block;
    font-size: 0.75rem;
    color: rgba(44, 13, 44, 0.65);
    font-weight: 400;
    line-height: 1.3;
    order: 2;
}

.btn.btn-cards{
    font-size: 10px;
    font-weight: 400;
    justify-content: start;
    padding-left: 10px;
    padding-right: 10px;
}

.nav-card-home .btn.btn-cards>span{
    width: 100%;
    text-align: left;

}


.actions-profile{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.header-page{
    padding: 40px 20px;
}
.header-page h1{
    font-weight: 700;
    font-size: 24px;
    color: #EF7926;
}
.image-profile{
    width: 120px;
    height: 120px;
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid;
}
.image-profile img{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    image-orientation: from-image;
}

.profile-specialty-icon{
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
}

.file-upload {
    display: none;
}

form.author textarea{
    height: 100px;
    text-align: left;
}

form.author input:not(.form-check-input),
form.author select
{
    height: 45px;
}

form.author label:not(.invalid-feedback){
    font-size: 18px;
}
form.author .form-check label{
    font-size: 12px;
    margin-left: 0;
}

.button-icone{
    text-align: center;
}
.button-icone button{
    display: block;
    width: 100%;
}

.button-icone button span{
    font-size: 15px;
    text-align: center;
    color: #2C0D2C;
    font-weight: 400;
}
.box-shadow{
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    position: relative;
}
.shadow-bg{
    background: #FFFBFF;
}

.table-responsive{
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.table>thead{
    background-color: #ECECEC;
}
table td,
table th{
    font-size: 13px;
    text-align: center;
}

button.btn-400{
    font-weight: 400;
    font-size: 13px;
}

.buttons-share{
    display: flex;
    align-items: center;
    position: absolute;
    right: 18px;
    background: #D9D9D9;
    height: 38px;
}

.carteira-saldo h3{
    color: #ffffff;/* R$50,00 */
    font-weight: 400;
    font-size: 48px;
}

.carteira-saldo p{
    font-size: 15px;
    color: #EF7926;
}

.wallet-action-link{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.wallet-action-link img{
    display: block;
}

.wallet-section{
    border: 1px solid #f0e7f4;
    border-radius: 12px;
    padding: 20px 16px;
    background: #fff;
}

.wallet-section-head{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.wallet-section-title{
    color: #2C0D2C;
    font-size: 20px;
    margin-bottom: 0;
}

.wallet-section .wallet-action-link{
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    padding: 12px;
    border: 1px dashed #e3d2ee;
    border-radius: 12px;
}

.wallet-status-chip{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    line-height: 1;
}

.wallet-status-chip--ok{
    color: #0C7A43;
    background: #E7F8EF;
    border: 1px solid #B9E7CD;
}

.wallet-status-chip--pending{
    color: #9A4F00;
    background: #FFF3E2;
    border: 1px solid #FFD9B0;
}

.wallet-primary-setup{
    min-width: 230px;
}

.wallet-secondary-cta{
    margin-top: 12px;
}

.wallet-secondary-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid #EF7926;
    border-radius: 999px;
    color: #EF7926 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

/* ============================================================
   Carteira (advogado): saldo em card de destaque + metodos em
   cards independentes. Classes novas (wallet-balance-*, wallet-method*,
   wallet-security) para nao afetar a carteira do cliente. Reaproveita
   .wallet-status-chip existente para os status.
   ============================================================ */

/* Desktop: conteudo centralizado com largura confortavel. */
@media (min-width: 769px){
    main.carteira > .container{
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- Card de saldo (sobre o fundo roxo) --- */
.wallet-balance-card{
    position: relative;
    overflow: hidden;
    /* Gradiente de luz: glow laranja saindo da regiao da ilustracao (direita) e
       fundindo no painel translucido sobre o roxo. */
    background:
        radial-gradient(115% 130% at 88% 32%, rgba(239, 121, 38, 0.15) 0%, rgba(239, 121, 38, 0.04) 38%, rgba(255, 255, 255, 0) 68%),
        rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    padding: 20px 20px 22px;
    margin-bottom: 22px;
}
.wallet-balance-illustration{
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-78%);
    line-height: 0;
    pointer-events: none;
}
.wallet-balance-illustration img{
    display: block;
    height: 132px;
    width: auto;
    opacity: 0.95;
}
@media (max-width: 380px){
    .wallet-balance-illustration img{ height: 108px; }
}
.wallet-balance-label{
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    margin: 0 0 4px;
}
.wallet-balance-value{
    color: #ffffff;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.1;
    margin: 0 0 14px;
}
.wallet-hide-toggle{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s;
}
.wallet-hide-toggle:hover,
.wallet-hide-toggle:focus{
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}
.wallet-balance-blocked{
    color: #EF7926;
    font-size: 13px;
    margin: 12px 0 0;
}
.wallet-balance-actions{
    margin-top: 18px;
    text-align: center;
}
.wallet-btn-sacar{
    width: 100%;
    max-width: 340px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Card externo "Meus dados para saque" --- */
.wallet-methods-card{
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
.wallet-methods-title{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2C0D2C;
    font-size: 19px;
    font-weight: 700;
    margin: 4px 0 14px;
}
.wallet-methods-title__icon{
    color: #EF7926;
    font-size: 20px;
}
.wallet-methods-hint{
    font-size: 14px;
    color: #6d6070;
    margin: 0 0 8px;
}

/* --- Cards de metodo (Pix / Banco) --- */
.wallet-method{
    text-align: left;
    background: #ffffff;
    border: 1px solid #efe6f3;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(44, 13, 44, 0.06);
    padding: 16px 16px 4px;
    margin-top: 16px;
}
.wallet-method__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.wallet-method__title{
    color: #2C0D2C;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.wallet-method__info{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}
.wallet-method__icon{
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex: 0 0 auto;
}
.wallet-method__data{
    font-size: 14px;
    color: #2C0D2C;
    min-width: 0;
}
.wallet-method__data p{
    margin: 0 0 2px;
    word-break: break-word;
}
.wallet-method__data span{
    color: #7a6f7c;
}
.wallet-method__desc{
    font-size: 14px;
    color: #6d6070;
    margin: 0 0 6px;
}
.wallet-method__optional{
    color: #9a8f9a;
    font-weight: 600;
}
.wallet-method__action{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    padding: 13px 4px;
    border-top: 1px solid #f2ecf5;
    color: #2C0D2C !important;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.15s;
}
.wallet-method__action:hover,
.wallet-method__action:focus{
    color: #EF7926 !important;
    outline: none;
}
.wallet-method__action-label i{
    color: #EF7926;
}
.wallet-method__action--cta{
    color: #EF7926 !important;
}
.wallet-method__chevron{
    color: #b9adbb;
    font-size: 13px;
}

/* icone dentro do chip de status (reusa .wallet-status-chip) */
.wallet-status-chip i{
    font-size: 12px;
}

/* --- Nota de seguranca / confianca --- */
.wallet-security{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f7f2fa;
    border: 1px solid #ece2f2;
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 20px;
    font-size: 12.5px;
    color: #6d6070;
    line-height: 1.5;
}
.wallet-security__icon{
    color: #8a6ca0;
    font-size: 16px;
    margin-top: 1px;
    flex: 0 0 auto;
}
.wallet-cpf-note{
    font-size: 12px;
    color: #9a4f00;
    margin: 12px 4px 0;
    text-align: left;
}

/* ============================================================
   Solicitar saque (/carteira/sacar, advogado): saldo sticky no topo
   + formulario reorganizado. Classes novas para nao afetar outras telas.
   ============================================================ */
main.carteira-sacar{
    align-items: flex-start !important;
}
@media (min-width: 769px){
    main.carteira-sacar > .container{
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Saldo fixo (sticky) logo abaixo do header (56px). Fundo opaco para o conteudo
   nao aparecer atras ao rolar. */
.wallet-balance-card--sticky{
    position: sticky;
    top: 56px;
    z-index: 5;
    margin-top: 10px;
    background:
        radial-gradient(115% 130% at 88% 32%, rgba(239, 121, 38, 0.15) 0%, rgba(239, 121, 38, 0.04) 38%, rgba(0, 0, 0, 0) 68%),
        #371937;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}
.wallet-balance-card--sticky .wallet-balance-illustration{
    transform: translateY(-50%);
}
.wallet-balance-card--sticky .wallet-balance-illustration img{
    height: 94px;
}

/* Card branco do formulario */
.wallet-sacar-card{
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
}
.wallet-sacar-title{
    color: #2C0D2C;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin: 6px 0 4px;
}
.wallet-sacar-intro{
    color: #6d6070;
    font-size: 14px;
    text-align: center;
    margin: 0 0 20px;
}

/* Card do valor */
.withdraw-amount-card{
    background: #FFFBFF;
    border: 1px solid #efe6f3;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(44, 13, 44, 0.06);
    padding: 18px 16px 16px;
    text-align: center;
}
.withdraw-amount-card__label{
    color: #2C0D2C;
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 8px;
}
.withdraw-amount-input.form-control{
    margin: 4px 0 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eadff0;
    border-radius: 0;
}
.withdraw-amount-card__hint{
    color: #9a8f9a;
    font-size: 12.5px;
    margin: 10px 0 0;
}
.withdraw-amount-card__hint i{
    color: #EF7926;
    margin-right: 4px;
}

/* Valores rapidos */
.wallet-sacar-card .btn-add-valor{
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: center;
    margin: 16px 0 0;
}
.wallet-quick{
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid #f6d9c4;
    background: #fdf1e8;
    color: #EF7926 !important;
    font-weight: 700;
    font-size: 13px;
    border-radius: 12px;
    padding: 11px 4px;
    line-height: 1;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}
.wallet-quick:hover:not(:disabled),
.wallet-quick:focus:not(:disabled){
    background: #EF7926;
    color: #ffffff !important;
}
.wallet-quick--all{
    background: #EF7926;
    color: #ffffff !important;
    border-color: #EF7926;
}
.wallet-quick--all:hover:not(:disabled),
.wallet-quick--all:focus:not(:disabled){
    background: #d96a1f;
    border-color: #d96a1f;
    color: #ffffff !important;
}
.wallet-quick:disabled{ opacity: 0.5; }

/* Sacar via: opcao de pagamento */
.wallet-sacar-via{
    margin-top: 20px;
}
.withdraw-method{
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FFFBFF;
    border: 1px solid #efe6f3;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 6px 18px rgba(44, 13, 44, 0.05);
}
.withdraw-method--selected{
    border-color: #f6d9c4;
    box-shadow: 0 6px 18px rgba(239, 121, 38, 0.10);
}
.withdraw-method__icon{
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex: 0 0 auto;
}
.withdraw-method__text{
    flex: 1 1 auto;
    min-width: 0;
}
.withdraw-method__title{
    color: #2C0D2C;
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 2px;
}
.withdraw-method__desc{
    color: #6d6070;
    font-size: 13px;
    margin: 0;
}
.withdraw-method__check{
    flex: 0 0 auto;
    line-height: 0;
}

/* Avisos suaves */
.wallet-sacar-warn{
    color: #9a4f00;
    background: #FFF3E2;
    border: 1px solid #FFD9B0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    text-align: center;
    margin: 14px 0 0;
}
.wallet-sacar-actions{
    margin-top: 24px;
}
/* Aviso CPF/CNPJ: alerta discreto (info), sem vermelho forte */
.wallet-info-note{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fdf1e8;
    border: 1px solid #f6d9c4;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 12.5px;
    color: #8a5a2a;
    line-height: 1.5;
    margin-top: 14px;
}
.wallet-info-note__icon{
    flex: 0 0 auto;
    margin-top: 1px;
}

/* ============================================================
   Cadastro de Pix / Dados bancarios: cabecalho com badge circular,
   campos com icone a esquerda, botao com cadeado e nota "Importante".
   ============================================================ */
@media (min-width: 769px){
    main.carteira-pix > .container,
    main.carteira-banco > .container{
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Flex-fill: o card branco preenche ate encostar no footer (mesmo padrao das
   demais telas). Cadeia: body > main > .container > form.author > .card-body. */
body:has(main.carteira-pix),
body:has(main.carteira-banco){
    display: flex;
    flex-direction: column;
}
main.carteira-pix,
main.carteira-banco{
    flex: 1 1 auto;
    align-items: stretch !important;
    min-height: 0;
}
main.carteira-pix > .container,
main.carteira-banco > .container{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
main.carteira-pix form.author,
main.carteira-banco form.author{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
main.carteira-pix .card-body.body-content,
main.carteira-banco .card-body.body-content{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    /* Valor fixo (sem env safe-area, ja tratado no body/footer), igual ao
       perfil-editar, para um vao consistente acima do footer. */
    padding-bottom: 72px;
}
/* Scroll apenas na area de conteudo; botao "Salvar" fixo acima do footer (Pix e
   Banco). Evita a sobreposicao do botao sobre o bloco "Importante". */
main.carteira-pix .card-body.body-content,
main.carteira-banco .card-body.body-content{ overflow: hidden; }
main.carteira-pix .card-body.body-content > .scroll,
main.carteira-banco .card-body.body-content > .scroll{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.carteira-form__actions{ flex: 0 0 auto; padding-top: 16px; }

/* Cabecalho: badge + titulo + subtitulo */
.form-lead{
    text-align: center;
    margin: 6px 0 24px;
}
.form-lead__badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #f3edf7;
    margin-bottom: 14px;
}
.form-lead__badge img{ width: 42px; height: 42px; object-fit: contain; }
.form-lead__badge svg{ width: 38px; height: 38px; }
.form-lead__title{ color: #2C0D2C; font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.form-lead__subtitle{ color: #6d6070; font-size: 14px; margin: 0; }

/* Campos com icone a esquerda */
.field-icon__wrap{ position: relative; }
.field-icon__lead{
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 0;
    pointer-events: none;
    color: #8a7f8c;
}
.field-icon .form-control{ padding-left: 44px; }
.field-icon__wrap--select select.form-control{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px;
}
.field-icon__chevron{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 0;
    pointer-events: none;
    color: #8a7f8c;
}

/* Botao salvar com cadeado */
.carteira-form__submit{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.carteira-form__submit svg{ width: 18px; height: 18px; }

/* Nota "Importante" (reusa .wallet-security) */
.wallet-note__title{ color: #EF7926; font-weight: 700; font-size: 13px; margin: 0 0 2px; }

.input-saldo.form-control {
    font-size: 48px;
    color: #2C0D2C;
    line-height: 0;
    border: none;
    padding: 0;
    text-align: center;
    color: #2C0D2C;
    box-shadow: none!important;
    background: transparent!important;
}
.btn-add-valor{
    margin: 15px 0 30px 0;
}
.btn-add-valor>button{
    font-weight: 400;
    font-size: 15px;
    line-height: 100%;
    color: #FFFFFF;
}

.offcanvas{
    background-color: #2C0D2C;
    width: 270px;
    top: 56px;
    bottom: 59px;
    overflow: hidden;
}


.offcanvas-body{
    position: relative;
    overflow-y: auto;
    height: 74vh !important;
    padding-bottom: 100px;
}

.offcanvas-body h5{
    color: #ffffff;
}

.offcanvas-body .form-check-label,
.offcanvas-body .nav-link{
    color: #ffffff;
    font-size: 15px;
    padding: 0;
}

.offcanvas-body .nav-item{
    padding: 8px 0;
}

.offcanvas-body .form-check-input{
    border-width: 2px;
    border-color: #ffffff;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");

}

.offcanvas-body .form-check-input:checked {
    background-color: transparent;
    border-color: #009933;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23009933'/%3e%3c/svg%3e");
}



.modal-backdrop.show {
    opacity: .2;
}

.chat-head-check h2{
    color: #2C0D2C;
}
.chat-head-check p{
    font-size: 16px;
}

.chat-check-option  {
    padding: 20px 0;
}

.chat-pergunta textarea{
    background: transparent;
    border-color: none;
    box-shadow: none;
    border-radius: 0;
    min-height: 150px;
}



.chat-pergunta textarea.form-control:focus {
  background-color: transparent;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: none;
}



.card.cardPergunta{
    border-radius: 10px;
    overflow: visible;
    height: 100%;
}
.card.cardPergunta > .card-body{
    border-radius: 10px;
    background-color: #faf7fb;
    background-image:
        linear-gradient(rgba(250, 247, 251, 0.12), rgba(250, 247, 251, 0.12)),
        url(../img/chat-bg.jpg);
    background-repeat: repeat, repeat;
    background-position: center, center;
    background-size: auto, 190px auto;
}

.card.cardPergunta,
.card.cardPergunta > .card-body{
    border-radius: 10px 10px 0 0;
}



.chat-especialidade-buttons{
    margin-bottom: 30px;
}
.chat-especialidade-buttons .btn{
    background: #FFFBFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    font-size: 15px;
    color: #2C0D2C;
    font-weight: 400;
    min-height: 37px;
}

.chat-time-option .btn{
    font-size: 64px;
    font-weight: 400;
    background: #FFFBFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    line-height: 1;
    min-height: 130px;
    min-width: 130px;
    font-size: 15px;
}

.contator-text {
    margin-top: 10px;
    padding-right: 15px;
}


.chat-time-option .btn:hover,
.chat-time-option .btn:focus,
.chat-time-option .btn:active,
.chat-especialidade-buttons .btn:hover,
.chat-especialidade-buttons .btn:focus,
.chat-especialidade-buttons .btn:active,
.time-buttons.btn:focus,
.time-buttons.btn:active{
    background-color: #EF7926;
    color: #ffffff;
}

.time-buttons.btn:focus,
.time-buttons.btn:active
.time-buttons.btn.active{
    box-shadow: 0 0 0 .25rem rgba(217,164,6,.5);
}

#btnCat .owl-stage-outer{
    z-index: 2;
    margin: 0 20px;
}
#btnCat .owl-nav {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    top: 3%;
    z-index: 0;
}


.btn-microfone .btn{
    height: 80px;
    width: 80px;
    color: #ffffff;
    font-size: 25px;
    border-radius: 50%;
    background-color: #2C0D2C;
}

.jconfirm .jconfirm-box.jconfirm-type-green,
.jconfirm .jconfirm-box.jconfirm-type-red{
    border-top: none;
}

.jconfirm .jconfirm-box,
.jconfirm.jconfirm-modern .jconfirm-box{
    background-color: #2C0D2C;
    border-radius: 15px;
}
.jconfirm .jconfirm-box.loading:before{
   background-color: #2C0D2C;
   border-radius: 16px;
}

/* Spinner em anel completo (trilho laranja claro + arco vivo), opacidade cheia. */
.jconfirm .jconfirm-box.loading:after{
    border: 3px solid rgba(239, 121, 38, 0.22);
    border-top-color: #EF7926;
    opacity: 1;
    height: 32px;
    width: 32px;
    margin-left: -16px;
    margin-top: -16px;
}

/* Backdrop dos modais na paleta da marca (roxo) em vez do cinza/preto padrao do
   jconfirm. A opacidade fica sem !important para o show/hide do jconfirm funcionar. */
.jconfirm.jconfirm-modern .jconfirm-bg{
    background-color: #2C0D2C !important;
    opacity: 0.6;
}

/*.jconfirm-box *,
.jconfirm-box div.jconfirm-closeIcon{
    color: #EF7926!important;
}*/

/*
.jconfirm-content *{
    //color: #EF7926!important;
}
*/


.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c{
    color: #EF7926;
}

.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content{
    margin-bottom: 0!important;
}

/* Padroniza os icones (FontAwesome) dos modais de alerta na paleta oficial
   (laranja), inclusive nos modais que esquecem a classe de cor -> mesmo padrao
   visual em todos os alertas. Icones de imagem da marca (icon-app-*, que usam
   background-image) tem arte propria e nao sao afetados por color. */
.jconfirm.jconfirm-modern .jconfirm-box .jconfirm-icon-c i{
    color: #EF7926 !important;
}

/* Acoes dos modais (jconfirm) estilo app: botoes full-width empilhados, arredondados
   e com toque confortavel. O modal do cartao tem layout proprio (excluido do stack). */
.jconfirm .jconfirm-box:not(.jconfirm-cartao) .jconfirm-buttons{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 2px 2px;
}
.jconfirm .jconfirm-box:not(.jconfirm-cartao) .jconfirm-buttons button{
    flex: 1 1 0;
    width: auto;
    margin: 0;
}
.jconfirm .jconfirm-box .jconfirm-buttons button{
    min-height: 46px;
    border-radius: 10px;
    border: 1px solid #EF7926;
    color: #EF7926!important;
    background-color: transparent!important;
    font-weight: 700;
    transition: background-color .15s, color .15s, filter .15s;
}
.jconfirm .jconfirm-box .jconfirm-buttons button:hover,
.jconfirm .jconfirm-box .jconfirm-buttons button:active{
    background-color: #EF7926!important;
    color: #ffffff!important;
}
/* Acao principal solida (laranja) para destacar a acao do modal. */
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-warning,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-primary,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-dark,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-proximo{
    background-color: #EF7926!important;
    border-color: #EF7926!important;
    color: #ffffff!important;
}
.jconfirm .jconfirm-box.jconfirm-cartao .jconfirm-buttons{
    display: flex !important;
    align-items: center;
    justify-content: flex-end !important;
    text-align: initial !important;
    width: 100%;
    gap: 10px;
    padding: 0 8px 12px;
    box-sizing: border-box;
    flex-wrap: wrap;
}
.jconfirm .jconfirm-box.jconfirm-cartao .jconfirm-buttons .btn-cancelar{
    margin-right: auto;
}
.jconfirm .jconfirm-box.jconfirm-cartao .jconfirm-buttons .btn-proximo{
    background-color: #B94B0C !important;
    border-color: #B94B0C !important;
    color: #ffffff !important;
}
.jconfirm .jconfirm-box.jconfirm-cartao .jconfirm-buttons .btn-proximo:hover{
    filter: brightness(0.95);
}

.jconfirm .jconfirm-box label{
    margin-left: 0;
    margin-bottom: 5px;
}
.jconfirm .jconfirm-box .form-control{
    background: transparent;
    border-color: #EF7926;
    color: #EF7926!important;
}


.jconfirm .jconfirm-box .form-control::placeholder {
  /* TODO: improve placeholder contrast; current orange matches input text. */
  color: #EF7926;
}

/* O icone dos modais de especialidade agora e um SVG proprio injetado no
   conteudo (ver especialidades.js: buildEspecialidadeContent), na paleta do app. */

/*Tela de cadastro*/
/* Estilização para posicionar o ícone dentro do wrapper */
.input-group {
    position: relative;
  }

  .input-group input {
    width: 100%;
    padding-right: 40px; /* Espaço para o ícone */
  }

  .input-group .toggle-password {
    position: absolute;
    right: 35px; /* Ajuste conforme necessário */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent; /* Remove o background padrão do input-group-text */
    border: none;            /* Remove a borda, se preferir */
    padding: 0;              /* Remove o padding para centralizar o ícone */
    cursor: pointer;
    color: #EF7926;
  }


.icon-full i{
    font-size: 170px;
}

.document-profile,
.document-self{
    width: 120px;
    height: 120px;
}



.document-profile img,
.document-frente img,
.document-verso img,
.document-self img{
    width: 100%!important;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.document-frente,
.document-verso{
    width: 300px;
    height: 186px;
}
.document-profile,
.document-frente,
.document-verso,
.document-self{
    overflow: hidden;
    position: relative;
    border-radius: 10px;
}

.offcanvasFiltros li,
.offcanvasFiltros .offcanvas-title{
    color: #ffffff;
}

.offcanvasFiltros .offcanvas-title {
    font-size: 12px;
    line-height: 18px;
}

.offcanvasFiltros ul,
.offcanvasFiltros li{
    margin: 0;
    padding: 0;
    list-style: none;
}

.offcanvasFiltros li.dividir-filtro{
    display: flex;
    justify-content: center;
}

.offcanvasFiltros li.dividir-filtro:before{
 content: '';
 width: 70px;
 height: 2px;
 background: #ffffff;
 display: block;
}
.offcanvasFiltros li label{
    cursor: pointer;
}
.offcanvasFiltros li .form-check{
    border-radius: 5px;
    padding: 5px 10px!important;
}

.offcanvasFiltros li .form-check.active{
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.offcanvasFiltros .header-body{
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

.offcanvasFiltros .span-data-filtro{
    width: 50px;
}

.offcanvasFiltros .btn.btn-link{
    color: #EF7926;
    font-weight: 400;
    text-decoration: none;
}
.btn-close {
    opacity: 1;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23EF7926'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;

}

.section-cvv{
    position: relative;
}

.info-cvv{
    position: absolute;
    color: #EF7926;
    right: 0;
    top: 32px;
}

.jconfirm-content .info-cvv i{
    font-size: 1rem!important;
}

.jconfirm-content i{
    font-size: 100px;
    line-height: normal;
}
.section-cvv input[name="cvv_cartao"].is-invalid,
.section-cvv input[name="cvv_cartao"].is-valid{
    background-image: unset;
}
.bandeira-cartao {
  position: absolute;
  right: 1px;
  top: 50%;
  margin-top: -20px;
  height: 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 0 9px 9px 0;
  background: #ffffff;
}

.bandeira-cartao>img{
    height: 30px!important;
}
.numero_cartao{
    position: relative;
}

.checkcontainer {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 17px;
    -webkit-user-select: none; /* Chrome, Opera, Safari */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

/* Hide the browser's default checkbox */
.checkcontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 17px;
    height: 20px;
    width: 20px;
    right: 0;
    border-radius: 50%;
    background-color: transparent;
}

.checkcontainer:hover input ~ .checkmark {
    background-color: #3bb54a;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
    background-color: #3bb54a;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark:after {
    display: block;
}

.checkcontainer .checkmark:after {
    left: 7px;
    top: 3px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.jconfirm .jconfirm-box.loading {
    height: 64px;
    width: 64px;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(44, 13, 44, 0.28);
}

.no-js .owl-carousel, .owl-carousel.owl-loaded{
    /*max-width: 320px;*/
}


.owl-nav{
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -13px;
}
.owl-carousel .owl-nav button.owl-next i,
.owl-carousel .owl-nav button.owl-prev i{
    font-size: 25px;
}



@media (max-width: 768px) {
    .jconfirm .jconfirm-box.jconfirm-cartao{
        display: flex !important;
        flex-direction: column;
        max-height: calc(100dvh - var(--fixed-footer-space, 72px) - 24px) !important;
        width: 94vw !important;
        max-width: 94vw !important;
    }

    .jconfirm .jconfirm-box.jconfirm-cartao .jconfirm-content-pane,
    .jconfirm .jconfirm-box.jconfirm-cartao .jconfirm-content{
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .jconfirm .jconfirm-box.jconfirm-cartao .jconfirm-content-pane{
        max-height: calc(100dvh - var(--fixed-footer-space, 72px) - 156px) !important;
        overflow-y: auto !important;
    }

    .jconfirm-content .owl-carousel,
    .jconfirm-content .owl-carousel .owl-stage-outer {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .jconfirm-content .owl-carousel .owl-item {
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden;
    }
}


.icon-applogo-modal{
    height: 39px;
    display: block;
    background-image: url(../img/a.png);
    background-position: center;
    background-repeat: no-repeat;
    min-width: 232px;
    background-size: contain;
}

.icon-appfail-modal{
    height: 117px;
    display: block;
    background-image: url(../img/modal-fail.svg);
    background-position: center;
    background-repeat: no-repeat;
    min-width: 232px;
    background-size: contain;
}

.icon-app-face-sad-cry{
    height: 117px;
    display: block;
    background-image: url(../img/modal-face-sad-cry.svg);
    background-position: center;
    background-repeat: no-repeat;
    min-width: 232px;
    background-size: contain;
}

.icon-app-perfil-alert{
    height: 137px;
    display: block;
    background-image: url(../img/modal-perfil.png);
    background-position: center;
    background-repeat: no-repeat;
    min-width: 232px;
    background-size: contain;
}


.icon-app-enveloper{
    height: 137px;
    display: block;
    background-image: url(../img/modal-envelope.png);
    background-position: center;
    background-repeat: no-repeat;
    min-width: 232px;
    background-size: contain;
}





.number-down-up {
  position: absolute;
  right: 20px;
  top: 31px;
}








.credite-card.scroll{
    max-height: 160px;
    overflow: auto;
}



.message {
    background-color: #fff;
    padding: 12px 16px;
    border-radius: 16px;
    position: relative;
    margin: 10px 0;
    max-width: 300px;

    opacity: 0; /* Começa invisível */
    transform: translateX(-50px); /* Começa deslocado para a esquerda */
    transition: transform 1s ease-out, opacity 1s ease-out; /* Transições suaves */
}

.message::after {
    content: '';
    display: block;
    position: absolute;
    background-color: inherit;
    width: 20px;
    height: 10px;
}

.message-right span {
    color: #2C0D2C;
}

.message-right {
    border-bottom-right-radius: 0;
}

.message-right::after {
    right: 0;
    top: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.message-left p {
    font-size: 1rem;
}

.message-left {
    border-bottom-left-radius: 0;
    background-color: #ffffff00;
}

.message-left::after {
    left: 0;
    top: 100%;
    clip-path: polygon(0 0, 0 100%, 100% 0);
}

.message p {
    margin-bottom: 0;
}

.message.show {
    opacity: 1;
    transform: translateX(0); /* Move para a posição original */
}

.message.message-right {
    transform: translateX(50px); /* Começa deslocado para a direita */
}

.message.message-right.show {
    transform: translateX(0); /* Move para a posição original */
}

/* Status Badge - Toggle Feedback Visual */
.status-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    margin-left: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Status online indicator (dot + subtle pulse) */
.image-profile.status-online {
    overflow: visible;
    box-shadow: none;
    border-color: transparent;
}

.image-profile.status-online .profile-pic {
    position: relative;
    z-index: 1;
}

.image-profile.status-online::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border-radius: 50%;
    border: 3px solid transparent;
    border-right-color: #14C968;
    border-bottom-color: #14C968;
    filter: drop-shadow(0 2px 10px rgba(20, 201, 104, 0.35));
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(12deg);
    transform-origin: center;
    z-index: 2;
}

.image-profile.status-online::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    border-radius: 50%;
    border: 2px solid transparent;
    border-right-color: rgba(20, 201, 104, 0.75);
    border-bottom-color: rgba(20, 201, 104, 0.75);
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(12deg) scale(0.92);
    transform-origin: center;
    will-change: transform, opacity;
    animation: status-online-arc-pulse 1.9s ease-out infinite;
    z-index: 3;
}

@keyframes status-online-arc-pulse {
    0% {
        opacity: 0.85;
        transform: translate(-50%, -50%) rotate(12deg) scale(0.92);
    }
    75% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(12deg) scale(1.12);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(12deg) scale(1.12);
    }
}

.status-badge.status-active {
    background-color: #E8F5E9;
    color: #2e7d32;
    border: 1px solid #4caf50;
}

.status-badge.status-inactive {
    background-color: #F5F5F5;
    color: #555;
    border: 1px solid #ddd;
}


.btn.button-texto{
    font-weight: 400;
    font-size: 15px;
}

main[class*="chat-"] {
    align-items: stretch !important;
}

main[class*="chat-"] .container {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

#page-content.chat-page-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

#page-content.chat-page-shell > .card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    padding-bottom: 0;
    border-radius: 35px 35px 0 0;
}

#panelChat.chat-page {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-bottom: 12px;
}

#footer-chat.chat-footer {
    flex: 0 0 auto;
    position: relative;
    z-index: 20;
    background: #FFFBFF;
    padding-top: 15px !important;
    padding-bottom: 0;
}

body.chat-keyboard-open {
  padding-bottom: 0;
}

.case-consent-search-cta {
  align-items: center;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(247, 124, 32, .36);
  border-radius: 16px;
  color: #30072b;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 12px 0 4px;
  padding: 12px;
}

.case-consent-search-cta strong {
  display: block;
  font-size: .95rem;
}

.case-consent-search-cta p {
  font-size: .78rem;
  line-height: 1.35;
  margin: 2px 0 0;
}

.case-consent-chat-cta {
  align-items: center;
  background: rgba(247, 124, 32, .12);
  border: 1px solid rgba(247, 124, 32, .28);
  border-radius: 999px;
  color: #30072b;
  display: flex;
  font-size: .78rem;
  gap: 8px;
  justify-content: space-between;
  margin: 0 24px 8px;
  padding: 7px 10px;
}

.case-consent-chat-cta a {
  color: #ef7926;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .case-consent-search-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .case-consent-chat-cta {
    align-items: flex-start;
    border-radius: 14px;
    flex-direction: column;
    margin-left: 16px;
    margin-right: 16px;
  }
}

#footer-chat .publisher {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 0;
    position: relative;
    z-index: 24;
    padding: 0 16px;
}

#footer-chat .publisher .input-post {
    flex: 1 1 auto;
    margin-right: 0;
    min-width: 0;
}

#footer-chat #send {
    flex: 0 0 44px;
    position: static;
    transform: none;
    z-index: 26;
}

#footer-chat #send.show-button {
    display: flex;
    transform: none;
}

#footer-chat #send.hide-button {
    display: none;
}

#footer-chat #encerrar {
    position: absolute;
    right: 22px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 32;
}

#footer-chat #encerrar.show-button {
    transform: none;
}

#message-input.publisher-input {
    max-height: calc((1.5em * 4) + 16px);
    transition: height .12s ease;
}

body.chat-keyboard-open #footer-chat #encerrar {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
}

.chat-footer .text-warning {
  color: #B94B0C !important;
}

.payment-card-screen {
  /* Clearance do footer fixo com um respiro pequeno (antes era +104px, o que
     deixava um vao grande entre o botao e o footer). */
  padding-bottom: calc(var(--fixed-footer-space, 72px) + 20px) !important;
}
/* Owl do formulario de cartao com altura AUTOMATICA. O autoHeight do owl fixava a
   altura no init (sem as mensagens de validacao) e cortava a ultima mensagem quando
   os erros apareciam. Com height:auto o proprio conteudo define a altura -- cresce e
   encolhe sozinho, sem JS e sem corte. */
.payment-card-screen .owl-carousel .owl-stage-outer {
  height: auto !important;
}

/* Titulo no mesmo padrao do perfil/acessos/email: herda o h2 global
   (a, h2 -> #EF7926, 700, 24px), sem override de cor. */

.payment-card-actions {
  /* Fica no fluxo normal da pagina (antes era position:fixed flutuante no rodape,
     o que sobrepunha o formulario e impedia concluir o cadastro do cartao). */
  margin: 0 !important;
  padding: 18px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  position: static;
}

.payment-card-actions .btn-warning {
  background-color: #B94B0C !important;
  border-color: #B94B0C !important;
  color: #ffffff !important;
  min-height: 44px;
}
/* Botao "Salvar preferencias" no padrao da marca (#EF7926). */
.process-consent-actions .btn-warning {
  background-color: #EF7926 !important;
  border-color: #EF7926 !important;
  color: #ffffff !important;
  min-height: 44px;
}

/* Checkboxes / switches da tela de consentimento na cor da marca (eram azul padrao) */
.process-consent-screen .form-check-input {
  width: 1.2em;
  height: 1.2em;
  margin-top: 0.15em;
  border-color: #c9b8c9;
  cursor: pointer;
}
.process-consent-screen .form-switch .form-check-input {
  width: 2.4em;
  border-radius: 2em;
}
.process-consent-screen .form-check-input:checked,
.process-consent-screen .form-check-input:indeterminate {
  background-color: #2C0D2C;
  border-color: #2C0D2C;
}
.process-consent-screen .form-check-input:focus {
  border-color: #2C0D2C;
  box-shadow: 0 0 0 0.2rem rgba(44, 13, 44, 0.25);
}
.process-consent-screen .form-check-label {
  cursor: pointer;
  padding-left: 0.25rem;
}

/* Tipografia padronizada (3 niveis): titulos, corpo e notas pequenas. */
.process-consent-screen h2,
.process-consent-screen h3,
.process-consent-screen .form-check-label.fw-bold {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}
.process-consent-screen p,
.process-consent-screen .form-check-label {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.4;
}
.process-consent-screen .small,
.process-consent-screen p.small {
  font-size: 0.8rem;
  line-height: 1.35;
}

.process-consent-screen h2,
.process-consent-screen .text-warning {
  color: #B94B0C !important;
}

.jconfirm .payment-card-actions {
  background: transparent;
  bottom: auto;
  left: auto;
  padding: 0;
  position: static;
  right: auto;
  z-index: auto;
}

.process-consent-screen {
  padding-bottom: calc(var(--fixed-footer-space, 72px) + 16px) !important;
}

.process-consent-actions {
  /* No fluxo normal (antes era sticky flutuante, cobrindo o "Uso pelo advogado"). */
  padding: 18px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  position: static;
}

.process-consent-actions .btn {
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(247, 124, 32, .22);
  min-height: 46px;
  min-width: min(100%, 260px);
}

@media (min-width: 768px) {
  .process-consent-screen {
    padding-bottom: calc(var(--fixed-footer-space, 72px) + 16px) !important;
  }

  .process-consent-actions {
    padding: 12px 0;
    position: static;
  }
}
/*main*/
main.home .body-content{
    min-height: calc(100dvh - 400px);
    max-height: calc(100dvh - 250px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-top: 20px;
    padding-bottom: calc(var(--fixed-footer-space) + 56px);
}

main.home .body-content::-webkit-scrollbar{
    width: 0;
    height: 0;
}

main.home .adv-head-profile{
    padding-bottom: clamp(14px, 2.4vh, 24px);
}

main.home .body-content > .d-flex{
    height: auto;
    min-height: 100%;
}



/* Tela "advogado indisponivel" (/chat/notAdv): centraliza o conteudo verticalmente.
   O #bodyCard so preenche a altura se o main tiver altura -> body flex via :has +
   main stretch (mesma abordagem da tela advogados). Degrada bem sem :has. */
body:has(main.chat-notAdv){
    display: flex;
    flex-direction: column;
}
main.chat-notAdv{
    flex: 1 1 auto;
    align-items: stretch !important;
    min-height: 0;
}
main.chat-notAdv #bodyCard.app-card-screen{
    justify-content: center;
}
main.login .card-body{
   min-height: calc(100dvh - 110px);
   padding-top: 50px;
   padding-bottom: calc(env(safe-area-inset-bottom) + 50px) !important;
}

main.welcome #bodyCard{
    width: 100%;
    max-height: calc(100dvh - 155px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-bottom: calc(var(--fixed-footer-space, 72px) + 10px) !important;
}

/* Tela "Seja bem-vindo" no padrao do app: espacamento enxuto (sem scroll
   desnecessario), titulo/descricao centralizados e sem vidva, callout .invite-note
   com respiro do botao, e acao fixa no rodape do card. */
main.welcome .welcome-screen{ min-height: 100%; }
main.welcome .welcome-screen__content{ flex: 1 1 auto; padding-top: 2px; text-align: center; }
main.welcome .welcome-screen__logo{ max-height: 46px; width: auto; }
main.welcome .welcome-screen__title{ margin: 10px auto 6px; }
main.welcome .welcome-screen .invite-welcome__desc{ margin: 0 auto 5px; max-width: 34ch; text-wrap: pretty; }
main.welcome .welcome-note{ margin-top: 22px; text-align: left; }
main.welcome .welcome-steps{ margin: 6px 0 0; padding-left: 18px; }
main.welcome .welcome-steps li{ color: #6b5a6b; font-size: 13px; line-height: 1.45; margin-bottom: 4px; }
main.welcome .welcome-steps li:last-child{ margin-bottom: 0; }
main.welcome .welcome-screen__actions{ margin-top: auto; padding-top: 18px; }

/* --- Layout flex adaptativo da pagina advogados: o card preenche ate o footer em
   qualquer tela, sem numero magico. Torna o body um flex column SO nesta pagina
   (via :has) para o main preencher entre o header sticky e o footer fixo. Degrada
   bem: em webview sem :has, o body segue block e o card fica em altura natural. --- */
body:has(main.advogados){
    display: flex;
    flex-direction: column;
}
main.advogados{
    flex: 1 1 auto;
    /* !important para ganhar da utilitaria .align-items-center do Bootstrap,
       senao o container fica centralizado (altura do conteudo) e a cadeia flex
       nao estica ate o footer. */
    align-items: stretch !important;
    min-height: 0;
}
main.advogados > .container{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}
main.advogados .page-overflow{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}
main.advogados form{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}
main.advogados .body-content{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    /* Reserva exatamente a altura do footer (45px, medido) para o fundo do card
       alinhar com o topo do footer. NAO usa safe-area aqui: ela ja e tratada pelo
       padding-bottom do body e pelo padding do proprio footer, entao se cancela e
       o alinhamento fica igual no desktop e no mobile. */
    padding-bottom: 45px;
}
main.advogados .body-content > .d-flex{
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    gap: 16px;
}
main.advogados .card.cardPergunta{
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

main.advogados button[type="submit"]{
    scroll-margin-bottom: calc(var(--fixed-footer-space) + 24px);
}


main.perfil  .body-content{
    height: calc(100dvh - 190px);
}

/* Perfil (advogado): preenche a altura via flex em vez de max-height com dvh
   (que causava o scroll "dancando" no mobile). Perfil no topo e acoes embaixo
   (justify-content-between), com scroll interno so se o conteudo realmente exceder. */
body:has(main.perfil.user-advg){
    display: flex;
    flex-direction: column;
}
main.perfil.user-advg{
    flex: 1 1 auto;
    align-items: stretch !important;
    min-height: 0;
}
main.perfil.user-advg > .container{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
main.perfil.user-advg .page-overflow{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
main.perfil.user-advg .body-content{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: visible;
    /* padding dentro do card: footer real (45px) + respiro para o "Editar Perfil"
       nao ficar colado no rodape. O card ainda preenche ate o footer (bg). */
    padding-bottom: 72px;
}

main.perfil.user-advg .actions-profile{
    padding-bottom: 24px;
}

/* Perfil (cliente): mesmo fix flex. Estrutura mais simples (#bodyCard direto na
   .container, sem .page-overflow). :not(.user-advg) pega o lado do cliente. */
body:has(main.perfil:not(.user-advg)){
    display: flex;
    flex-direction: column;
}
main.perfil:not(.user-advg){
    flex: 1 1 auto;
    align-items: stretch !important;
    min-height: 0;
}
main.perfil:not(.user-advg) > .container{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
main.perfil:not(.user-advg) #bodyCard{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: var(--fixed-footer-space);
}
main.perfil-acessos  .body-content{
    height: calc(100dvh - 303px);
    padding-bottom: 40px!important;
}

/* Editar acesso (e-mail/senha), advg e cliente: flex-fill consistente com o resto
   do sistema. O card preenche ate o footer no desktop/app e elimina o scroll
   forcado que a altura fixa (calc 100dvh) causava na tela de senha. A cadeia
   passa pelo <form> que fica entre .page-overflow e .body-content. */
body:has(main.perfil-acessos-email),
body:has(main.perfil-acessos-senha){
    display: flex;
    flex-direction: column;
}
main.perfil-acessos-email,
main.perfil-acessos-senha{
    flex: 1 1 auto;
    align-items: stretch !important;
    min-height: 0;
}
main.perfil-acessos-email > .container,
main.perfil-acessos-senha > .container{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
main.perfil-acessos-email .page-overflow,
main.perfil-acessos-senha .page-overflow{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
}
main.perfil-acessos-email form.author,
main.perfil-acessos-senha form.author{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
main.perfil-acessos-email .body-content,
main.perfil-acessos-senha .body-content{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    /* Reserva a altura VISUAL do footer fixo (sem env(safe-area): o body e o proprio
       footer ja aplicam o safe-area; incluir aqui contava em triplicado e inflava o
       vao no celular). Valor fixo -> gap consistente do botao ao footer. */
    padding-bottom: 72px;
}
/* Erro de validacao nos campos de senha: fica abaixo do input-group (nao dentro),
   e removemos o icone "!" de fundo do Bootstrap que sobrepunha o botao "olho". */
main.perfil-acessos-email .input-group .form-control.is-invalid,
main.perfil-acessos-senha .input-group .form-control.is-invalid{
    background-image: none;
    padding-right: 40px;
}

/* ===== Componente de Steps (Editar acesso: e-mail e senha) =====
   Compartilhado pelas duas telas / dois paineis. Cada step ocupa toda a altura
   util do card, com as acoes ancoradas no rodape -> elimina o scroll de ~30px. */
.access-steps{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding-top: 8px;
}
.access-steps__progress{
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
}
.access-steps__dot{
    width: 26px;
    height: 5px;
    border-radius: 3px;
    background: #e4dbe4;
    transition: background .25s ease;
}
.access-steps__dot.is-active{
    background: #EF7926;
}
.access-step{
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    justify-content: space-between;
}
.access-step.is-active{
    display: flex;
    animation: accessStepFade .28s ease;
}
@keyframes accessStepFade{
    from{ opacity: 0; transform: translateY(10px); }
    to{ opacity: 1; transform: translateY(0); }
}
.access-step__body{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.access-step__actions{
    margin-top: auto;
    padding-top: 16px;
}
.access-step__actions .btn{
    width: 100%;
}
.access-step__actions--split{
    display: flex;
    gap: 10px;
}
.access-step__actions--split .btn{
    flex: 1 1 0;
    width: auto;
}
/* Botao "Voltar": contorno laranja (secundario), no mesmo tamanho dos CTAs. */
.btn-voltar{
    background: transparent;
    border: 1px solid #EF7926;
    color: #EF7926;
    min-height: 46px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.btn-voltar:hover,
.btn-voltar:active,
.btn-voltar:focus{
    background: #EF7926;
    color: #ffffff;
}
.access-step__timer{
    color: #EF7926;
    font-weight: 600;
    min-height: 18px;
}

main.carteira-cartao .card-body{
    padding-bottom: calc(env(safe-area-inset-bottom) + 50px)!important;
}




/* ===== /perfil/editar (advogado e cliente): flex-fill + secoes =====
   Substitui as alturas fixas quebradas (calc(100dvh + 150px) forcava scroll e
   jogava o "Salvar" por baixo do footer). Mesmo padrao das demais telas. */
body:has(main.perfil-editar){
    display: flex;
    flex-direction: column;
}
main.perfil-editar{
    flex: 1 1 auto;
    align-items: stretch !important;
    min-height: 0;
}
main.perfil-editar > .container{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
main.perfil-editar .page-overflow{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
main.perfil-editar form.author{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
main.perfil-editar .body-content{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    padding-bottom: 72px;
    overflow: hidden;
}
/* Somente os campos rolam; header (fora do card) e acoes ficam fixos.
   overflow-x: hidden evita o scroll horizontal (overflow-y:auto promove o x para
   auto e as margens negativas do .row do Bootstrap disparavam a barra no desktop). */
main.perfil-editar .body-content > .scroll{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
/* Desktop: formulario centralizado com largura confortavel (evita esticar). */
@media (min-width: 769px){
    main.perfil-editar .page-overflow{ align-items: center; }
    main.perfil-editar .header-page,
    main.perfil-editar .body-content{ width: 100%; max-width: 680px; }
}

/* Compactacao para caber sem scroll no mobile: header e espacamentos enxutos,
   Bio menor. Campos pareados (Estado/Cidade, Telefone/CPF) usam grid col-6. */
main.perfil-editar .profile-section{ margin-bottom: 16px; }
main.perfil-editar textarea.form-control{ min-height: 64px; }

/* Secoes do formulario de perfil: titulo curto laranja com divisor. */
.profile-section{ margin-bottom: 22px; }
.profile-section:last-of-type{ margin-bottom: 8px; }
.profile-section__title{
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #EF7926;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1eaf1;
}

/* Acoes de foto: "Alterar" e "Remover" como botoes primarios, largura total. */
.profile-photo-actions{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.profile-photo-actions .btn{ align-self: stretch; }

/* Contador da Bio */
.bio-counter{ color: #9a8f9a; font-size: 11px; }

/* Acoes finais lado a lado: Voltar (contorno) + Salvar (solido). */
main.perfil-editar .actions-profile{
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex: 0 0 auto;
    margin-top: 0;
    padding-top: 16px;
}
main.perfil-editar .actions-profile .btn{ flex: 1 1 0; }

main.convite-adv .body-content,
main.convite-cli .body-content{
    height: calc(100dvh - 216px);
}

/* ============================================================
   Convite (advogado): hero + cards de acao (amigo/advogado) + rede.
   ============================================================ */
/* Flex-fill: o card branco preenche ate encostar no footer. */
body:has(main.convite){ display: flex; flex-direction: column; }
main.convite{ flex: 1 1 auto; align-items: stretch !important; min-height: 0; }
main.convite > .container{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
main.convite .page-overflow{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
main.convite .body-content{ flex: 1 1 auto; min-height: 0; height: auto; padding-top: 18px; padding-bottom: 72px; }
@media (min-width: 769px){
    main.convite > .container{ max-width: 620px; margin-left: auto; margin-right: auto; }
}

/* Cards de acao */
.invite-card{
    display: block;
    background: #ffffff;
    border: 1px solid #efe6f3;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(44, 13, 44, 0.06);
    padding: 18px;
    margin-bottom: 16px;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.1s;
}
.invite-card:active{ transform: translateY(1px); }
.invite-card__head{ display: flex; align-items: flex-start; gap: 14px; }
.invite-card__badge{
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.invite-card__badge svg{ width: 26px; height: auto; }
.invite-card__badge--friend{ background: #fdf1e8; }
.invite-card__badge--lawyer{ background: #f3edf7; }
.invite-card__body{ flex: 1 1 auto; min-width: 0; }
.invite-card__title{ color: #2C0D2C; font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.invite-card__desc{ color: #6d6070; font-size: 14px; line-height: 1.5; margin: 0; }
.invite-card__chevron{ flex: 0 0 auto; width: 18px; height: 18px; color: #b9adbb; margin-top: 4px; }

.invite-chips{ display: flex; flex-wrap: nowrap; gap: 10px; margin-top: 12px; }
.invite-chip{ display: inline-flex; align-items: center; gap: 5px; color: #2C0D2C; font-size: 12px; font-weight: 600; white-space: nowrap; }
.invite-chip svg{ flex: 0 0 auto; width: 13px; height: 13px; }

.invite-card__cta{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 16px;
    min-height: 48px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
}
.invite-card__cta svg{ width: 18px; height: 18px; }
.invite-card__cta--outline{
    background: transparent;
    border: 1px solid #2C0D2C;
    color: #2C0D2C;
}

/* Rede */
.invite-network{
    display: flex;
    align-items: center;
    gap: 16px;
    background: #f7f2fa;
    border: 1px solid #ece2f2;
    border-radius: 16px;
    padding: 18px;
}
.invite-network__icon{ flex: 0 0 auto; line-height: 0; }
.invite-network__title{ color: #2C0D2C; font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.invite-network__text{ color: #6d6070; font-size: 13.5px; line-height: 1.5; margin: 0; }

/* ============================================================
   Convite: compartilhar (amigo/advogado) - QR, link, info e socials.
   ============================================================ */
/* Conteudo alto: fluxo natural (o card cresce com o conteudo e a pagina rola);
   o card sobe ate o topo e o clearance do footer evita cortar os socials. */
main.convite-cli .body-content,
main.convite-adv .body-content{ height: auto; min-height: 100%; padding-top: 20px; padding-bottom: 128px; }
@media (min-width: 769px){
    main.convite-cli > .container,
    main.convite-adv > .container{ max-width: 560px; margin-left: auto; margin-right: auto; }
}

.invite-share-lead{ color: rgba(255, 255, 255, 0.78); font-size: 14px; line-height: 1.5; margin: -6px 6px 18px; padding: 0 4px; }

.invite-share{ text-align: center; }
.invite-share__illus{ display: inline-block; line-height: 0; margin: 4px 0 14px; }
.invite-share__title{ color: #2C0D2C; font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.invite-share__subtitle{ color: #6d6070; font-size: 14px; line-height: 1.5; margin: 0 auto 20px; max-width: 320px; }

/* QR com molduras laranja */
.invite-qr{ position: relative; display: inline-block; padding: 16px; background: #fff; border: 1px solid #efe6f3; border-radius: 16px; box-shadow: 0 6px 18px rgba(44, 13, 44, 0.06); }
.invite-qr img{ display: block; width: 220px; height: 220px; max-width: 60vw; }
.invite-qr__c{ position: absolute; width: 20px; height: 20px; border: 3px solid #EF7926; }
.invite-qr__c--tl{ top: 8px; left: 8px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.invite-qr__c--tr{ top: 8px; right: 8px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.invite-qr__c--bl{ bottom: 8px; left: 8px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.invite-qr__c--br{ bottom: 8px; right: 8px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }

.invite-or{ display: flex; align-items: center; gap: 14px; margin: 22px 4px 18px; color: #8a7f8c; font-size: 13px; }
.invite-or::before, .invite-or::after{ content: ''; flex: 1; height: 1px; background: #eadff0; }

.invite-link-label{ text-align: left; color: #2C0D2C; font-weight: 700; font-size: 14px; margin: 0 0 8px; }
.invite-link{ display: flex; align-items: center; background: #FFFBFF; border: 1px solid #efe6f3; border-radius: 14px; overflow: hidden; }
.invite-link__icon{ flex: 0 0 auto; padding: 0 8px 0 14px; line-height: 0; }
.invite-link__input{ flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 14px 6px; font-size: 13px; color: #2C0D2C; }
.invite-link__input:focus{ outline: none; }
.invite-link__copy{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: #f3edf7; color: #2C0D2C; border: 0; border-left: 1px solid #efe6f3; padding: 13px 16px; cursor: pointer; }
.invite-link__copy:hover{ background: #eadff0; }

.invite-info{ display: flex; align-items: flex-start; gap: 12px; text-align: left; background: #f7f2fa; border: 1px solid #ece2f2; border-radius: 14px; padding: 16px; margin-top: 16px; }
.invite-info__icon{ flex: 0 0 auto; margin-top: 1px; }
.invite-info__title{ color: #2C0D2C; font-weight: 700; font-size: 14px; margin: 0 0 3px; }
.invite-info div span{ color: #6d6070; font-size: 13px; line-height: 1.5; }

.invite-share-via{ color: #2C0D2C; font-weight: 700; font-size: 15px; margin: 22px 0 14px; text-align: center; }
.invite-socials{ display: flex; justify-content: space-between; gap: 8px; }
.invite-social{ flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; }
.invite-social__icon{ width: 56px; height: 56px; border-radius: 50%; background: #ffffff; border: 1px solid #efe6f3; box-shadow: 0 4px 12px rgba(44, 13, 44, 0.06); display: inline-flex; align-items: center; justify-content: center; }
.invite-social__icon svg{ width: 34px; height: 34px; }
.invite-social__label{ font-size: 12.5px; font-weight: 600; color: #2C0D2C; }


main.historico.user-advg .body-content{
    height: calc(100dvh - 300px);
}

/* Especialidades (advg): mesmo flex-fill do /perfil. O card preenche de baixo do
   titulo ate encostar no footer, no desktop e no app. Substitui a altura fixa
   (calc 100dvh) que no desktop nao batia com o footer (a "quebra"/vazio). */
body:has(main.perfil-especialidade.user-advg){
    display: flex;
    flex-direction: column;
}
main.perfil-especialidade.user-advg{
    flex: 1 1 auto;
    align-items: stretch !important;
    min-height: 0;
}
main.perfil-especialidade.user-advg > .container{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
main.perfil-especialidade.user-advg .page-overflow{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
main.perfil-especialidade.user-advg .body-content{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: visible;
}

/* Select2 estilo APP (especialidades): controle arredondado com foco laranja e
   dropdown com cantos/sombra + itens com toque confortavel e ativo laranja.
   Usa as classes de hook (container/dropdown), pois o dropdown e anexado ao body. */
.select2-container--default.especialidade-select .select2-selection--single {
    height: 50px;
    border-radius: 12px;
    border: 1px solid #e4dbe4;
    background: #FFFBFF;
    display: flex;
    align-items: center;
    padding: 0 6px;
    transition: border-color .15s, box-shadow .15s;
}
.select2-container--default.especialidade-select.select2-container--open .select2-selection--single,
.select2-container--default.especialidade-select .select2-selection--single:focus {
    border-color: #EF7926;
    box-shadow: inset 0 0 0 1.5px rgba(239, 121, 38, 0.45);
    outline: none;
}
.select2-container--default.especialidade-select .select2-selection--single .select2-selection__rendered {
    line-height: 48px;
    padding-left: 10px;
    color: #2C0D2C;
    font-size: 0.95rem;
}
.select2-container--default.especialidade-select .select2-selection--single .select2-selection__placeholder {
    color: #9a8f9a;
}
.select2-container--default.especialidade-select .select2-selection--single .select2-selection__arrow {
    height: 48px;
    right: 8px;
}
.select2-container--default.especialidade-select .select2-selection--single .select2-selection__arrow b {
    border-color: #EF7926 transparent transparent transparent;
}

.especialidade-dropdown.select2-dropdown {
    border: none;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(44, 13, 44, 0.18);
    overflow: hidden;
    margin-top: 6px;
}
.especialidade-dropdown .select2-search--dropdown {
    padding: 10px;
}
.especialidade-dropdown .select2-search--dropdown .select2-search__field {
    border: 1px solid #e4dbe4;
    border-radius: 10px;
    padding: 10px 12px;
    outline: none;
}
.especialidade-dropdown .select2-search--dropdown .select2-search__field:focus {
    border-color: #EF7926;
    box-shadow: inset 0 0 0 1.5px rgba(239, 121, 38, 0.35);
}
.especialidade-dropdown .select2-results > .select2-results__options {
    max-height: min(45dvh, 360px);
}
.especialidade-dropdown .select2-results__option {
    padding: 13px 16px;
    font-size: 0.95rem;
    color: #2C0D2C;
}
.especialidade-dropdown .select2-results__option--highlighted[aria-selected] {
    background: rgba(239, 121, 38, 0.12) !important;
    color: #2C0D2C !important;
}
.especialidade-dropdown .select2-results__option[aria-selected="true"] {
    background: #EF7926 !important;
    color: #ffffff !important;
}

/* Cards das especialidades selecionadas: visual mais suave e app-like. */
main.perfil-especialidade .box-button-icone {
    margin-top: 16px;
}
/* Respiro entre o card e o botao de editar (lapis) abaixo dele. */
main.perfil-especialidade .box-button-icone > .text-center {
    margin-top: 10px;
}
main.perfil-especialidade .box-button-icone .button-icone.box-shadow {
    box-shadow: 0 8px 20px rgba(44, 13, 44, 0.10);
    border-radius: 14px;
    border: 1px solid #f1eaf1;
    padding: 14px 10px 12px;
}
main.perfil-especialidade .box-button-icone .button-icone.box-shadow:active {
    transform: translateY(1px);
}
main.perfil-especialidade .box-button-icone .button-icone img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}
main.perfil-especialidade .box-button-icone .button-icone button span {
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
}

main.chat-opening.user-advg .body-content{
    height: calc(100dvh - 187px);
    padding-bottom: 40px;
}

.profile-form-field > label,
.wallet-form-field > label {
    display: block;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: .25rem;
}

.profile-form-field > small,
.wallet-form-field > small {
    margin-left: 0;
    padding-left: 0;
}

.payment-confirm-modal label {
    display: block;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: .35rem;
}

.payment-confirm-modal .header-page img {
    max-width: 220px;
    height: auto;
}

/* Pagamento forcado pelo saldo: bloco travado no lugar do seletor de metodo,
   exibido quando o cliente tem saldo suficiente na carteira. */
.payment-confirm-modal .payment-locked-method{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid #efe2f2;
    border-radius: 12px;
    background: #FFFBFF;
}
.payment-confirm-modal .payment-locked-method__icon{
    display: inline-flex;
    line-height: 0;
    flex: 0 0 auto;
}
.payment-confirm-modal .payment-locked-method__text{
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
}
.payment-confirm-modal .payment-locked-method__text strong{
    color: #2C0D2C;
    font-size: 14px;
}
.payment-confirm-modal .payment-locked-method__text span{
    color: #8a7f8c;
    font-size: 12px;
}
.payment-confirm-modal .payment-locked-method__lock{
    display: inline-flex;
    line-height: 0;
    flex: 0 0 auto;
}

/* =========================================================================
   Convite recebido (author/register/{uuid}/{advg|cli})
   Escopo restrito a .author-invite e .invite-state para nao vazar para
   outras telas que reutilizam .form-control / .check-busco-adv / .btn-*.
   Paleta: roxo #2C0D2C, laranja #EF7926, fundo claro #FFFBFF.
   ========================================================================= */
main.author-invite{
    background: #FFFBFF;
    /* Clearance do footer fixo (fixed-bottom ~45px) + respiro. O fundo claro do
       body (branco) cobre a area abaixo quando o conteudo e curto. */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Nas telas standalone de convite/cadastro o header (roxo) cobre a status bar:
   zera o padding-top de safe-area do BODY (que e global) para nao dobrar, e
   aplica o safe-area no proprio header (padding + altura). Assim o header sticky
   fica correto no topo E ao rolar, sem espaco duplicado. */
body:has(main.author-invite){ padding-top: 0; }
body:has(main.author-invite) header.header{
    padding-top: env(safe-area-inset-top, 0px);
    min-height: calc(56px + env(safe-area-inset-top, 0px));
}
main.author-invite > .container{
    max-width: 480px;
}

/* Contexto do convite (quem convidou + tipo de conta). */
.invite-welcome{
    text-align: center;
    margin-bottom: 6px;
}
.invite-welcome__badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    line-height: 1;
}
.invite-welcome__badge--adv{
    background: #2C0D2C;
    color: #ffffff;
}
.invite-welcome__badge--cli{
    background: #FDEBD9;
    color: #EF7926;
}
.invite-welcome__title{
    font-size: 18px;
    font-weight: 600;
    color: #2C0D2C;
    line-height: 1.3;
    margin: 14px auto 8px;
    max-width: 28ch;
}
.invite-welcome__from{
    margin: 0;
    color: #6b5a6b;
    font-size: 14px;
}
.invite-welcome__from b{
    color: #2C0D2C;
    font-weight: 600;
}
.invite-welcome__desc{
    margin: 10px auto 15px;
    font-size: 14px;
    line-height: 1.45;
    max-width: 36ch;
}

/* Foco dos campos na paleta da marca, sem afetar outras telas. */
main.author-invite .form-control:focus{
    border-color: #EF7926;
    box-shadow: 0 0 0 .2rem rgba(239, 121, 38, .15);
}

/* --- Wizard do convite no padrao .access-step (fade). --- */
/* Ilustracao (envelope aberto + avatar + selo). */
.invite-illus{ display: flex; justify-content: center; margin: 6px auto 14px; }
.invite-illus svg{ width: 150px; height: auto; }

/* Card de quem convidou. */
.invite-from{ display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #efe6f3; border-radius: 16px; padding: 14px 16px; box-shadow: 0 6px 18px rgba(44,13,44,.05); margin: 16px 0 14px; text-align: left; }
.invite-from__avatar{ flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: #f3edf7; display: flex; align-items: center; justify-content: center; color: #7a3fa0; }
.invite-from__avatar svg{ width: 22px; height: 22px; }
.invite-from__text{ margin: 0; color: #3a2f3c; font-size: 13.5px; line-height: 1.45; }
.invite-from__text b{ color: #2C0D2C; }
/* Fixa o card do convidante logo abaixo do header ao rolar (sticky top:70px).
   Precisa liberar o overflow do ancestral: .access-step__body tem overflow-y:auto,
   que quebraria o position:sticky relativo a viewport. Escopo so no convite. */
main.author-invite .access-step__body{ overflow: visible; }
main.author-invite .invite-from{ position: sticky; top: 70px; z-index: 5; }

/* Callout (Importante / dados protegidos). */
.invite-note{ display: flex; align-items: flex-start; gap: 12px; background: #f6f1f8; border-radius: 16px; padding: 16px; margin: 20px 0; text-align: left; }
.invite-note__icon{ flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: #7a3fa0; color: #fff; display: flex; align-items: center; justify-content: center; }
.invite-note__icon svg{ width: 20px; height: 20px; }
.invite-note__title{ margin: 0 0 3px; color: #2C0D2C; font-weight: 700; font-size: 15px; }
.invite-note__text{ margin: 0; color: #6b5a6b; font-size: 13px; line-height: 1.5; }

/* Rotulos dos campos (input/botao usam o padrao do app: .form-control + .btn-*). */
main.author-invite .form-label{ color: #2C0D2C; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
main.author-invite .form-control{ min-height: 45px; }
/* Campo de senha: input redondo normal (.form-control) com o botao de ver/ocultar
   posicionado por dentro a direita (sem .input-group, que deixava o canto quadrado). */
main.author-invite .pw-field{ position: relative; }
main.author-invite .pw-field .form-control{ padding-right: 46px; }
main.author-invite .pw-field .toggle-password{ position: absolute; right: 4px; top: 0; bottom: 0; width: 42px; display: flex; align-items: center; justify-content: center; color: #8a7f8c; background: none; border: 0; cursor: pointer; }
/* Erro de validacao dos campos com botao (senha): fica FORA do .input-group
   (errorPlacement) e precisa ser exibido, ja que nao e irmao direto do input. */
main.author-invite .input-group:has(.form-control.is-invalid) + .invalid-feedback,
main.author-invite .pw-field:has(.form-control.is-invalid) + .invalid-feedback{ display: block; }

/* Callout "CPF/CNPJ ja cadastrado" (login/recuperar) no padrao branded. */
main.author-invite .duplicate-cpf-cta{ background: #fff5ee; border: 1px solid #f7dcc6; border-radius: 14px; padding: 14px 16px; margin-top: 10px; }
main.author-invite .duplicate-cpf-cta__head{ display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
main.author-invite .duplicate-cpf-cta__icon{ flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #EF7926; color: #fff; display: flex; align-items: center; justify-content: center; }
main.author-invite .duplicate-cpf-cta__icon svg{ width: 18px; height: 18px; }
main.author-invite .duplicate-cpf-cta__text{ margin: 0; color: #2C0D2C; font-size: 13px; line-height: 1.45; }
main.author-invite .duplicate-cpf-cta__actions{ display: flex; flex-wrap: wrap; gap: 10px; }
main.author-invite .duplicate-cpf-cta__actions .btn{ flex: 0 0 auto; min-height: 36px; padding: 6px 14px; border-radius: 9px; font-size: 13px; font-weight: 700; }

/* Marcadores de requisitos da senha: mudo por padrao, verde (text-success) quando
   atendido; prefixo muda de bolinha para check. */
main.author-invite .minLength,
main.author-invite .letterAndNumber,
main.author-invite .symbol,
main.author-invite .noRepeatedOrSequential{ color: #9a8c9a; font-size: 12px; line-height: 1.9; transition: color .2s ease; }
main.author-invite .minLength::before,
main.author-invite .letterAndNumber::before,
main.author-invite .symbol::before,
main.author-invite .noRepeatedOrSequential::before{ content: "\2022\00a0\00a0"; }
main.author-invite .minLength.text-success::before,
main.author-invite .letterAndNumber.text-success::before,
main.author-invite .symbol.text-success::before,
main.author-invite .noRepeatedOrSequential.text-success::before{ content: "\2713\00a0\00a0"; }

/* Selecao de tipo de conta (cadastro normal, Step 1): cards com radio + texto + icone. */
main.author-invite .reg-type{ display: flex; align-items: center; gap: 14px; border: 1.5px solid #ece4ee; border-radius: 18px; padding: 18px; margin: 0 0 14px; cursor: pointer; background: #fff; transition: border-color .22s ease, background-color .22s ease, box-shadow .28s ease, transform .22s ease; }
main.author-invite .reg-type:hover{ border-color: #d9c7e0; }
/* Estado marcado: card roxo #2C0D2C (texto claro) com elevacao/sombra. */
main.author-invite .reg-type:has(input:checked){ border-color: #2C0D2C; background: #2C0D2C; box-shadow: 0 12px 26px rgba(44, 13, 44, .22); transform: translateY(-2px); }
/* Marcador (radio) laranja proprio, sem depender de accent-color (WebView). */
main.author-invite .reg-type input[type="radio"]{ appearance: none; -webkit-appearance: none; width: 22px; height: 22px; flex: 0 0 auto; margin: 0; border: 2px solid #d9c7e0; border-radius: 50%; background: #fff; position: relative; cursor: pointer; transition: border-color .22s ease; }
main.author-invite .reg-type input[type="radio"]:checked{ border-color: #EF7926; }
main.author-invite .reg-type input[type="radio"]::after{ content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #EF7926; transform: scale(0); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
main.author-invite .reg-type input[type="radio"]:checked::after{ transform: scale(1); }
main.author-invite .reg-type__body{ flex: 1 1 auto; min-width: 0; }
main.author-invite .reg-type__title{ font-weight: 700; font-size: 17px; margin: 0 0 4px; transition: color .22s ease; }
main.author-invite .reg-type__desc{ font-size: 13px; line-height: 1.4; margin: 0; transition: color .22s ease; }
/* No card marcado (fundo roxo) o texto fica claro. */
main.author-invite .reg-type:has(input:checked) .reg-type__title{ color: #ffffff; }
main.author-invite .reg-type:has(input:checked) .reg-type__desc{ color: rgba(255, 255, 255, .72); }
/* Radio no card escuro: sem fundo branco, so o anel/ponto laranja. */
main.author-invite .reg-type:has(input:checked) input[type="radio"]{ background: transparent; border-color: #EF7926; }
main.author-invite .reg-type__ico{ flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .22s ease, background-color .22s ease, color .22s ease; }
main.author-invite .reg-type:has(input:checked) .reg-type__ico{ transform: scale(1.08); background: rgba(255, 255, 255, .12); }
main.author-invite .reg-type:has(input:checked) .reg-type__ico--advg{ color: #ffffff; }
main.author-invite .reg-type__ico svg{ width: 28px; height: 28px; }
main.author-invite .reg-type__ico--user{ background: #fdeede; color: #EF7926; }
main.author-invite .reg-type__ico--advg{ background: #efe2f2; color: #7a3fa0; }

/* Botao Proximo com seta e callout de politica no Step 1. */
main.author-invite .reg-next{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
main.author-invite .reg-next svg{ width: 20px; height: 20px; }
main.author-invite .invite-note--soft .invite-note__icon{ background: #efe2f2; color: #7a3fa0; }
main.author-invite .invite-note a{ color: #EF7926; font-weight: 600; }

/* Suporte (fixo no rodape do conteudo, todas as etapas). */
.invite-support{ display: flex; align-items: center; gap: 12px; background: #f7f3f9; border-radius: 16px; padding: 16px; margin: 22px 0 4px; text-align: left; }
.invite-support__icon{ flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: #efe2f2; color: #7a3fa0; display: flex; align-items: center; justify-content: center; }
.invite-support__icon svg{ width: 20px; height: 20px; }
.invite-support__title{ margin: 0 0 2px; color: #2C0D2C; font-weight: 700; font-size: 14px; }
.invite-support__text{ margin: 0; color: #6b5a6b; font-size: 12.5px; line-height: 1.45; }
.invite-support__link{ color: #EF7926; font-weight: 700; font-size: 13px; text-decoration: none; display: inline-block; margin-top: 2px; }

/* Secao "Por que ser um advogadOn?" / cliente. */
.invite-why{ background: #faf7fb; border-top: 1px solid #efe6f3; padding: 26px 18px calc(26px + env(safe-area-inset-bottom, 0px)); margin: 22px -18px 0; }
.invite-why__title{ text-align: center; color: #2C0D2C; font-weight: 700; font-size: 18px; margin: 0 0 20px; }
.invite-why__title span{ color: #EF7926; }
.invite-why__grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 820px; margin: 0 auto; }
.invite-why__item{ text-align: center; }
.invite-why__ico{ width: 52px; height: 52px; border-radius: 50%; background: #fdeede; color: #EF7926; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.invite-why__ico svg{ width: 26px; height: 26px; }
.invite-why__name{ color: #2C0D2C; font-weight: 700; font-size: 13px; margin: 0 0 4px; }
.invite-why__desc{ color: #8a7f8c; font-size: 11.5px; line-height: 1.4; margin: 0; }
@media (max-width: 520px){ .invite-why__grid{ grid-template-columns: repeat(2, 1fr); gap: 18px 12px; } }

/* Estado do convite invalido (author/convite-invalido.php). */
main.invite-state{
    background: #FFFBFF;
    min-height: calc(100dvh - 56px);
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
main.invite-state > .container{
    max-width: 460px;
}
.invite-state__card{
    text-align: center;
    padding: 8px 12px 24px;
}
.invite-state__icon{
    display: inline-flex;
    line-height: 0;
}
.invite-state__title{
    color: #2C0D2C;
    font-weight: 600;
    font-size: 22px;
    margin: 18px 0 8px;
}
.invite-state__message{
    color: #6b5a6b;
    font-size: 15px;
    line-height: 1.45;
    margin: 0 auto 26px;
    max-width: 34ch;
}
.invite-state__actions{
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 320px;
    margin: 0 auto;
}
.invite-state__ghost{
    border: 1.5px solid #e7dbe7;
    color: #2C0D2C;
    background: #ffffff;
}
.invite-state__ghost:hover{
    background: #faf5fa;
    color: #2C0D2C;
}
.invite-state__help{
    color: #9a8c9a;
    font-size: 12.5px;
    line-height: 1.4;
    margin: 22px auto 0;
    max-width: 34ch;
}

/* =========================================================================
   Cadastro de cartao de credito (user/form/cartao.php + form partial)
   Paleta: roxo #2C0D2C, laranja #EF7926, fundo #FFFBFF.
   O indicador de passo reutiliza o mesmo componente do acessos
   (.access-steps__progress / .access-steps__dot).
   ========================================================================= */
/* Foco dos campos na paleta da marca. */
.payment-card-screen .form-control:focus{
    border-color: #EF7926;
    box-shadow: 0 0 0 .2rem rgba(239, 121, 38, .15);
}

/* Bandeira do cartao sem distorcao (a imagem do provedor e 42x20). */
.bandeira-cartao img{
    width: 40px;
    height: auto;
    max-height: 26px;
    object-fit: contain;
}

/* Atalho em destaque: usar o endereco do cadastro. */
.cartao-use-address{
    border: 1.5px solid #efe2f2;
    background: #FFFBFF;
    border-radius: 12px;
    padding: 12px 14px;
}
.cartao-use-address__label{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    cursor: pointer;
}
.cartao-use-address__label .form-check-input{
    margin-top: 3px;
    flex: 0 0 auto;
}
.cartao-use-address__label .form-check-input:checked{
    background-color: #EF7926;
    border-color: #EF7926;
}
.cartao-use-address__label .form-check-input:focus{
    border-color: #EF7926;
    box-shadow: 0 0 0 .2rem rgba(239, 121, 38, .2);
}
.cartao-use-address__text strong{
    display: block;
    color: #2C0D2C;
    font-size: 14px;
    line-height: 1.25;
}
.cartao-use-address__text small{
    display: block;
    color: #8a7f8c;
    font-size: 12px;
    line-height: 1.3;
    margin-top: 2px;
}

/* Botoes: Proximo roxo (btn-primary) e Cadastrar laranja (btn-warning). */
.payment-card-screen .payment-card-actions .btn-warning{
    background-color: #EF7926 !important;
    border-color: #EF7926 !important;
    color: #fff !important;
    min-height: 44px;
}
.payment-card-screen .payment-card-actions .btn-primary{
    min-height: 44px;
}
/* Voltar reutiliza .btn-voltar (contorno laranja) do acessos; aqui so garante
   que ele nao estique como os CTAs (Proximo/Cadastrar usam flex-fill). */
.payment-card-screen .payment-card-actions .card-btn-voltar{
    flex: 0 0 auto;
    min-width: 96px;
}

/* =========================================================================
   Ajuda (nativa no app) - /ajuda
   Paleta: roxo #2C0D2C, laranja #EF7926, fundo claro #FFFBFF.
   ========================================================================= */
/* Layout flex: o conteudo rola internamente (.body-content) entre o header-page
   fixo e o footer, sem a pagina inteira rolar. Mesmo padrao de perfil/advogados. */
body:has(main.ajuda){ display: flex; flex-direction: column; }
main.ajuda{ flex: 1 1 auto; align-items: stretch !important; min-height: 0; }
main.ajuda > .container{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; }
/* Reserva a altura do footer fixo (45px) FORA do painel, para o fundo do
   .body-content terminar exatamente no topo do footer (e nao passar por tras
   dele). 45px flat: a safe-area ja e tratada pelo body e pelo proprio footer. */
main.ajuda .page-overflow{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; padding-bottom: 45px; }
main.ajuda .header-page{ flex: 0 0 auto; }
main.ajuda .body-content{
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: #FFFBFF;
    padding-top: 16px;
    padding-bottom: 16px;
}

/* Bloco de suporte em destaque. */
.ajuda-page .help-support{
    text-align: center;
    border: 1.5px solid #efe2f2;
    background: #FFFBFF;
    border-radius: 16px;
    padding: 22px 18px 18px;
    margin-bottom: 22px;
}
.ajuda-page .help-support__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(239, 121, 38, 0.12);
    margin-bottom: 12px;
}
.ajuda-page .help-support__title{
    color: #2C0D2C;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px;
}
.ajuda-page .help-support__desc{
    color: #6b5a6b;
    font-size: 14px;
    line-height: 1.45;
    margin: 0 auto 16px;
    max-width: 40ch;
}
.ajuda-page .help-support__mail{
    display: inline-block;
    margin: 2px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: #EF7926;
    text-decoration: none;
    word-break: break-word;
}
.ajuda-page .help-support__mail:hover,
.ajuda-page .help-support__mail:focus{
    text-decoration: underline;
}

/* Rotulo de secao. */
.ajuda-page .help-section-title{
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #9a8c9a;
}

/* Lista de atalhos (documentos/privacidade). */
.ajuda-page .help-links{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ajuda-page .help-link{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1.5px solid #efe2f2;
    border-radius: 14px;
    background: #ffffff;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.ajuda-page .help-link:hover,
.ajuda-page .help-link:focus{
    border-color: #e0cfe0;
    background: #faf5fa;
    transform: translateY(-1px);
}
.ajuda-page .help-link__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: #f3ecf4;
}
.ajuda-page .help-link__text{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}
.ajuda-page .help-link__text strong{
    color: #2C0D2C;
    font-size: 15px;
    font-weight: 600;
}
.ajuda-page .help-link__text small{
    color: #8a7f8c;
    font-size: 12.5px;
    line-height: 1.35;
}
.ajuda-page .help-link__chevron{
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: #c9b7d1;
}

/* Nota de contato ao final. */
.ajuda-page .help-foot-note{
    margin: 20px 0 0;
    text-align: center;
    font-size: 13px;
    color: #9a8c9a;
}
.ajuda-page .help-foot-note a{
    color: #2C0D2C;
    font-weight: 600;
    text-decoration: none;
}

/* =========================================================================
   Artigos do fluxo de ajuda (legal/compliance) - legal/app-shell.php
   Hierarquia de artigo: breadcrumb, header, chip, data, "Neste artigo" (TOC),
   conteudo .legal-*, feedback, suporte e navegacao anterior/proximo.
   Escopo por .legal-article-page. Paleta da marca.
   ========================================================================= */
body:has(.legal-article-page){ display: flex; flex-direction: column; }
main:has(.legal-article-page){ flex: 1 1 auto; align-items: stretch !important; min-height: 0; }
main:has(.legal-article-page) > .container{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; }
.legal-article-page{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding-bottom: 45px; /* reserva do footer fixo, fora do painel */
}
.legal-article-page .body-content{
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: #FFFBFF;
    padding-top: 14px;
    padding-bottom: 24px;
}

/* Cabecalho do artigo */
.legal-article-page .article-head{ margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #efe2f2; }
.legal-article-page .article-head__badge{
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(239, 121, 38, 0.12); margin-bottom: 12px;
}
/* Titulo no padrao do app (.header-page h1): 24px, 700, laranja #EF7926. */
.legal-article-page .article-head__title{
    font-size: 24px; line-height: 1.2; font-weight: 700; color: #EF7926;
    margin: 0 0 10px;
}
.legal-article-page .article-chip{
    display: inline-block; padding: 5px 12px; border-radius: 999px;
    background: #f0e7f4; color: #7a3fa0; font-size: 12px; font-weight: 600;
}
.legal-article-page .article-head__updated{
    display: flex; align-items: center; gap: 6px;
    margin: 12px 0 0; font-size: 13px; color: #8a7f8c;
}

/* Neste artigo (TOC) */
.legal-article-page .article-toc{ border: 1.5px solid #efe2f2; border-radius: 14px; background: #faf6fb; margin-bottom: 20px; }
.legal-article-page .article-toc__head{
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: none; border: 0; padding: 12px 14px; font-size: 14px; font-weight: 700; color: #2C0D2C; cursor: pointer;
}
.legal-article-page .article-toc__chevron{ transition: transform .2s ease; color: #7a3fa0; }
.legal-article-page .article-toc.is-collapsed .article-toc__chevron{ transform: rotate(-90deg); }
.legal-article-page .article-toc__list{ list-style: none; margin: 0; padding: 0 14px 10px; }
.legal-article-page .article-toc.is-collapsed .article-toc__list{ display: none; }
.legal-article-page .article-toc__list li{ position: relative; padding: 6px 0 6px 16px; }
.legal-article-page .article-toc__list li::before{
    content: ''; position: absolute; left: 2px; top: 13px;
    width: 5px; height: 5px; border-radius: 50%; background: #EF7926;
}
.legal-article-page .article-toc__list a{ color: #3a2f3c; text-decoration: none; font-size: 14px; }
.legal-article-page .article-toc__list a:hover,
.legal-article-page .article-toc__list a:focus{ color: #EF7926; }

/* ---- Conteudo (.legal-content-app): tipografia e componentes .legal-* ---- */
.legal-content-app{ color: #2f2431; font-size: 15px; }
.legal-content-app h2{
    font-family: 'Poppins', sans-serif; color: #2C0D2C;
    font-size: 1.18rem; line-height: 1.3; margin-top: 1.7rem; margin-bottom: 0.6rem; scroll-margin-top: 12px;
}
.legal-content-app h3{
    font-family: 'Poppins', sans-serif; color: #2C0D2C;
    font-size: 1rem; margin-top: 1.4rem; margin-bottom: 0.5rem;
}
.legal-content-app p,
.legal-content-app li{ line-height: 1.75; color: #3a2f3c; margin-bottom: 0.7rem; }
.legal-content-app ul,
.legal-content-app ol{ padding-left: 1.15rem; }
.legal-content-app a{ color: #2C0D2C; font-weight: 600; }
.legal-content-app a:hover,
.legal-content-app a:focus{ color: #EF7926; }
.legal-content-app .legal-lead{ font-size: 15.5px; color: #6b5a6b; line-height: 1.65; }
.legal-content-app .legal-note,
.legal-content-app .legal-callout{ border-radius: 14px; padding: 14px 16px; margin: 16px 0; }
.legal-content-app .legal-note{ background: rgba(44, 13, 44, 0.05); border-left: 4px solid #2C0D2C; }
.legal-content-app .legal-callout{ background: rgba(239, 121, 38, 0.10); border: 1px solid rgba(239, 121, 38, 0.20); }
.legal-content-app .legal-grid{ display: grid; grid-template-columns: 1fr; gap: 14px; }
.legal-content-app .legal-pane{ background: #f7f2f7; border: 1.5px solid #efe2f2; border-radius: 14px; padding: 16px 16px 4px; }
.legal-content-app .legal-pane h2,
.legal-content-app .legal-pane h3{ margin-top: 0.2rem; }
.legal-content-app .legal-form .field{ margin-bottom: 14px; }
.legal-content-app .legal-form label{ display: block; margin-bottom: 6px; font-weight: 600; color: #2C0D2C; font-size: 14px; }
.legal-content-app .legal-form input,
.legal-content-app .legal-form select,
.legal-content-app .legal-form textarea{
    width: 100%; border-radius: 12px; border: 1px solid rgba(44, 13, 44, 0.18);
    padding: 12px 14px; font: inherit; color: #231124; background: #fff;
}
.legal-content-app .legal-form input:focus,
.legal-content-app .legal-form select:focus,
.legal-content-app .legal-form textarea:focus{
    outline: none; border-color: #EF7926; box-shadow: 0 0 0 .2rem rgba(239, 121, 38, .15);
}
.legal-content-app .legal-form textarea{ min-height: 130px; resize: vertical; }
.legal-content-app .legal-form small{ display: block; margin-top: 6px; color: #8a7f8c; font-size: 12.5px; }
.legal-content-app .legal-form__checkbox{ display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; }
.legal-content-app .legal-form__checkbox input{ width: auto; margin-top: 3px; flex: 0 0 auto; }
.legal-content-app .legal-form__checkbox label{ margin: 0; font-weight: 400; color: #3a2f3c; font-size: 13.5px; line-height: 1.45; }
.legal-content-app .legal-button{
    display: inline-flex; justify-content: center; align-items: center; width: 100%;
    min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px;
    background: #EF7926; color: #ffffff; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
}
.legal-content-app .legal-button:hover,
.legal-content-app .legal-button:focus{ color: #ffffff; filter: brightness(1.04); }
.legal-content-app .legal-alert{ border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; border: 1px solid transparent; font-size: 14px; }
.legal-content-app .legal-alert--error{ background: rgba(159, 24, 24, 0.08); border-color: rgba(159, 24, 24, 0.18); color: #7d1d1d; }
.legal-content-app .legal-alert--success{ background: rgba(21, 128, 61, 0.09); border-color: rgba(21, 128, 61, 0.20); color: #166534; }
.legal-content-app .legal-placeholder{ color: #9a3f0c; font-weight: 700; }

/* Essa resposta ajudou? */
.legal-article-page .article-feedback{ margin-top: 24px; border: 1px solid #efe2f2; border-radius: 14px; background: #FFFBFF; padding: 16px; text-align: center; }
.legal-article-page .article-feedback__q{ margin: 0 0 12px; font-weight: 700; color: #2C0D2C; font-size: 15px; }
.legal-article-page .article-feedback__actions{ display: flex; gap: 10px; justify-content: center; }
.legal-article-page .article-feedback__btn{
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 20px;
    border-radius: 10px; background: #fff; font-weight: 600; cursor: pointer;
}
.legal-article-page .article-feedback__btn--yes{ border: 1.5px solid #d9c7e0; color: #7a3fa0; }
.legal-article-page .article-feedback__btn--yes:hover{ background: #f7f0fa; }
.legal-article-page .article-feedback__btn--no{ border: 1.5px solid #f3d3bd; color: #EF7926; }
.legal-article-page .article-feedback__btn--no:hover{ background: #fdf3ec; }
.legal-article-page .article-feedback__thanks{ margin: 0; font-weight: 600; color: #2C0D2C; }

/* Ainda precisa de ajuda? */
.legal-article-page .article-support{ margin-top: 14px; border: 1px solid #efe2f2; border-radius: 14px; background: #faf6fb; padding: 18px 16px; text-align: center; }
.legal-article-page .article-support__title{ margin: 0 0 4px; font-weight: 700; color: #2C0D2C; font-size: 15px; }
.legal-article-page .article-support__desc{ margin: 0 0 14px; color: #6b5a6b; font-size: 13.5px; }
.legal-article-page .article-support__btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; font-weight: 600; }

/* Navegacao anterior/proximo: barra FIXA acima do footer (fora do scroll). */
.legal-article-page .article-nav{
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    background: #FFFBFF;
    /* Sombra bem suave no topo: separacao sutil entre conteudo e navegacao. */
    box-shadow: 0 -6px 14px rgba(44, 13, 44, 0.06);
}
.legal-article-page .article-nav > span{ flex: 1 1 0; }
.legal-article-page .article-nav__item{
    flex: 1 1 0; display: flex; align-items: center; gap: 10px; padding: 12px;
    background: #fff; text-decoration: none; min-width: 0;
}
.legal-article-page .article-nav__item:hover{ border-color: #e0cfe0; background: #faf5fa; }
.legal-article-page .article-nav__item svg{ width: 20px; height: 20px; flex: 0 0 auto; color: #7a3fa0; }
.legal-article-page .article-nav__item--prev{ padding-right: 0; }
.legal-article-page .article-nav__item--next{ justify-content: flex-end; text-align: right; padding-left: 0; }
.legal-article-page .article-nav__text{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.legal-article-page .article-nav__text strong{
    font-size: 12px; color: #2C0D2C; font-weight: 600; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.legal-article-page .article-nav__text small{
    font-size: 10px; color: #8a7f8c; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* =========================================================================
   Tela de analise/oferta do advogado (chat-opening.php) - redesenho conforme
   print aprovado. Mantem os hooks de JS (.chat-opening-screen, .chat-opening-footer,
   .btn-opening-pass, .btn-opening-answer, #countdown). Paleta da marca.
   ========================================================================= */
/* Sino animado (inc/alert-bell) escalado para caber no card. */
.opening-analise .opening-bell{
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 8px;
}
.opening-analise .opening-bell .alert-bell{
    position: relative;
    padding-top: 0;
    transform: scale(0.55);
    transform-origin: center;
}
.opening-analise .opening-chip{
    display: inline-block; padding: 6px 16px; border-radius: 999px;
    background: #f0e7f4; color: #7a3fa0; font-size: 13px; font-weight: 600;
}
.opening-analise .opening-title{
    font-size: 22px; font-weight: 700; color: #2C0D2C; margin: 14px 0; line-height: 1.2;
}

/* Caixa da pergunta */
.opening-analise .opening-question-box{
    border: 1.5px solid #efe2f2; border-radius: 14px; padding: 16px; background: #fff;
}
.opening-analise .opening-channel{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.opening-analise .opening-channel svg{ width: 22px; height: 22px; flex: 0 0 auto; }
.opening-analise .opening-channel__tab{ font-size: 15px; font-weight: 600; color: #a99caa; }
.opening-analise .opening-channel__tab.is-active{ color: #2C0D2C; }
.opening-analise .opening-channel__sep{ width: 1px; height: 16px; background: #e0d3e0; }
.opening-analise .opening-question-text{ color: #2f2431; font-size: 15px; line-height: 1.5; min-height: auto; white-space: pre-wrap; }

/* Status: relogio + texto + tempo */
.opening-analise .opening-status{ display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.opening-analise .opening-status__icon{
    width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
    background: #f0e7f4; display: flex; align-items: center; justify-content: center;
}
.opening-analise .opening-status__icon svg{ width: 22px; height: 22px; }
.opening-analise .opening-status__label{ flex: 1 1 auto; margin: 0; font-weight: 700; color: #2C0D2C; line-height: 1.25; }
.opening-analise .opening-status__divider{ width: 1px; align-self: stretch; min-height: 40px; background: #e0d3e0; }
.opening-analise .opening-status__time{ flex: 0 0 auto; text-align: center; }
.opening-analise .opening-status__time time{ display: block; font-size: 28px; font-weight: 700; color: #2C0D2C; line-height: 1; }
.opening-analise .opening-status__time small{ color: #8a7f8c; font-size: 12px; }

/* Aviso */
.opening-analise .opening-info{
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(239, 121, 38, 0.10); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
}
.opening-analise .opening-info__icon{
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    background: #EF7926; color: #fff; font-weight: 700; font-style: italic;
    display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1;
}
.opening-analise .opening-info p{ margin: 0; font-size: 12px; line-height: 1.35; color: #3a2f3c; }

/* Valor do atendimento na oferta: liquido do advogado em destaque + taxa */
.opening-analise .opening-value{
    margin-top: 14px; border: 1.5px solid #efe2f2; border-radius: 14px;
    background: #faf5fc; padding: 14px 16px;
}
.opening-analise .opening-value__main{
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.opening-analise .opening-value__label{ font-size: 13px; font-weight: 600; color: #7a3fa0; }
.opening-analise .opening-value__amount{ font-size: 26px; font-weight: 800; color: #2C0D2C; line-height: 1; }
.opening-analise .opening-value__fee{
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e0d3e0;
    font-size: 12px; color: #8a7f8c;
}

/* ==== Tela de pagamento Pix (cliente) ==== */
.pix-screen{ padding-top: 8px; }

.pix-screen .pix-qr-hint{
    margin: 0 auto 14px; max-width: 300px; text-align: center;
    font-size: 12.5px; line-height: 1.4; color: #6b5a6b;
}
.pix-screen .pix-qr-wrap{ text-align: center; margin-bottom: 16px; }
.pix-screen .invite-qr img{ width: 190px; height: 190px; max-width: 62vw; }

.pix-screen .pix-code{
    display: flex; align-items: center; gap: 6px; background: #fff;
    border: 1.5px solid #efe2f2; border-radius: 10px; padding: 4px 4px 4px 14px; margin-bottom: 12px;
}
.pix-screen .pix-code__input{
    flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none;
    padding: 9px 0; font-size: 14px; color: #3a2f3c;
}
.pix-screen .pix-code__copy{
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    border: 0; background: transparent; color: #7a3fa0; font-weight: 600; font-size: 14px; padding: 8px 10px;
}
.pix-screen .pix-code__copy:hover{ color: #5f2f80; }

.pix-screen .pix-primary-btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700;
}
.pix-screen .pix-primary-btn svg{ width: 18px; height: 18px; }

.pix-screen .pix-or{
    display: flex; align-items: center; gap: 12px; margin: 14px 0; color: #9a8c9a; font-size: 13px;
}
.pix-screen .pix-or::before,
.pix-screen .pix-or::after{ content: ""; flex: 1; height: 1px; background: #efe2f2; }

.pix-screen .pix-cancel-btn{ gap: 8px; }
.pix-screen .pix-cancel-btn svg{ width: 18px; height: 18px; }

.pix-screen .pix-info{
    display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 4px;
    background: rgba(239, 121, 38, 0.10); border-radius: 12px; padding: 12px 14px;
}
.pix-screen .pix-info__icon{
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #EF7926;
    color: #fff; font-weight: 700; font-style: italic; font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.pix-screen .pix-info p{ margin: 0; font-size: 11.5px; line-height: 1.35; color: #3a2f3c; }

.pix-screen .pix-timer{ margin-top: 14px; }
.pix-screen .pix-timer__label{
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 0 0 2px; font-size: 14px; color: #2C0D2C;
}
.pix-screen .pix-timer__label svg{ width: 18px; height: 18px; }
.pix-screen .pix-timer__count{ font-size: 34px; font-weight: 700; color: #2C0D2C; line-height: 1.1; }

/* ==== Chat do cliente: refinamentos visuais (escopo .user; nao afeta advogado) ==== */
/* Timer do topo: agrupar relogio + tempo num respiro so (some o vao do width fixo) */
.page-container.user #headerChat{ padding: 14px 20px 10px; background: #fcf6fe; }
.page-container.user #footer-chat.chat-footer{ background: #fcf6fe; padding-bottom: 10px; }
.page-container.user #headerChat .card-title{ font-size: 13px; font-weight: 600; color: #EF7926; margin-bottom: 2px; letter-spacing: .2px; }
.page-container.user #headerChat .time-session{ width: auto; gap: 12px; justify-content: center; }
.page-container.user #headerChat .count{ font-size: 32px; font-weight: 700; line-height: 1.1; }

/* Bloco de interacoes: tipografia no nosso padrao */
.page-container.user #footer-chat .text-interacoes > p:first-child{ color: #2C0D2C; margin-bottom: 4px; }
.page-container.user #footer-chat .text-interacoes small{ color: #6b5a6b; font-size: 12px; line-height: 1.4; }

/* Callout de informacao no chat do cliente (mesmo padrao de .pix-info/.opening-info) */
.page-container.user #footer-chat .chat-info{
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(239, 121, 38, 0.10); border-radius: 12px;
    padding: 10px 12px; margin: 6px -8px 12px; text-align: left;
}
.page-container.user #footer-chat .chat-info__icon{
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    background: #EF7926; color: #fff; font-weight: 700; font-style: italic;
    font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.page-container.user #footer-chat .chat-info p{
    margin: 0; font-size: 10px; line-height: 1.35; color: #3a2f3c;
}

/* ==== Chat do cliente: melhorias visuais (escopo .user) ==== */
/* 1. Mensagem recebida (advogado) em lilas suave; enviada (cliente) fica branca */
.page-container.user .media-chat:not(.media-chat-reverse) .media-body:not(.chat-consideracoes):not(.chat-typing) p{
    background: #f6f0f8;
}
/* 2. Limpa os "chips" translucidos atras do nome e da hora */
.page-container.user .media-chat h4 > span,
.page-container.user .media-chat h4 > time{
    background: transparent;
    padding: 0;
}
/* 3. Numero de interacoes como badge (bolinha da marca) */
.page-container.user #footer-chat #interacoes{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px; margin: 0 2px;
    border-radius: 999px; background: #EF7926; color: #fff;
    font-weight: 700; font-size: 12px; line-height: 1; vertical-align: middle;
}
/* 4. Pulso suave no contador quando entra em contagem critica (<=30s) */
@keyframes chatTimerPulse{
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.06); }
}
.page-container.user #headerChat #time.text-danger{
    display: inline-block;
    animation: chatTimerPulse 1s ease-in-out infinite;
}

/* ==== Chat do advogado: mesmas melhorias visuais (.advg) ==== */
/* Mensagem recebida (cliente) em lilas suave; enviada (advogado) branca */
.page-container.advg .media-chat:not(.media-chat-reverse) .media-body:not(.chat-consideracoes):not(.chat-typing) p{
    background: #f6f0f8;
}
/* Limpa os "chips" translucidos atras do nome e da hora */
.page-container.advg .media-chat h4 > span,
.page-container.advg .media-chat h4 > time{
    background: transparent;
    padding: 0;
}
/* Fundo do rodape (onde ficam o contador e o input no advogado) */
.page-container.advg #footer-chat.chat-footer{ background: #fcf6fe; padding-bottom: 10px; }
/* Contador padronizado + pulso quando entra em contagem critica (<=30s) */
.page-container.advg #footer-chat .count{ font-size: 32px; font-weight: 700; line-height: 1.1; }
.page-container.advg #footer-chat #time.text-danger{
    display: inline-block;
    animation: chatTimerPulse 1s ease-in-out infinite;
}

/* ===== Chat: layout 100% CSS (sem altura calculada por JS) =====
   O body usa height:100dvh e reserva a safe-area via padding (topo/base).
   Aqui so fazemos header/main/footer preencherem a area util com flex, para o
   #footer-chat ficar sempre acima da barra de navegacao (fim do corte no app).
   Ativado por 'chat-shell-active' (adicionada em layoutChatPage). */
body.chat-shell-active{
    display: flex;
    flex-direction: column;
}
body.chat-shell-active > main{
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
body.chat-shell-active > main > .container{
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}
body.chat-shell-active #page-content.chat-page-shell{
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

/* No chat, o rodape do app (footer.fixed-bottom) entra no fluxo flex em vez de
   position:fixed. Assim ele NAO sobrepoe o input e o proprio flex reserva o
   espaco dele automaticamente (sem numero magico / sem calculo em JS). */
body.chat-shell-active > footer.footer.fixed-bottom{
    position: static;
    /* O body ja reserva env(safe-area-inset-bottom); nao duplicar aqui (senao
       sobra um vao escuro grande abaixo do "© ..."). So o respiro interno. */
    padding-bottom: 0.5rem;
}

/* ===== Campo de mensagem: foco / edicao / envio mais claros e acessiveis =====
   Escopo #footer-chat (cliente + advogado). Sem animacoes em loop. */
/* Pilula do input: transicao suave + anel de foco laranja + leve clareada ao focar */
#footer-chat .publisher > .input-post{
    transition: box-shadow .18s ease, background-color .18s ease;
}
#footer-chat .publisher > .input-post:focus-within{
    background: #3a1339;
    box-shadow: 0 0 0 2px rgba(239, 121, 38, .6);
}
/* Texto digitado sempre legivel (branco); placeholder segue suave */
#footer-chat .publisher-input{ transition: color .18s ease; }
#footer-chat .publisher-input:focus,
#footer-chat .publisher-input:not(:placeholder-shown){ color: #ffffff; }
#footer-chat .publisher-input::placeholder{ color: rgba(255, 255, 255, .5); }

/* Botao de envio: ao ficar ativo (ha texto) fica LARANJA e entra com um leve pop */
#footer-chat #send.publisher-btn{
    color: #ffffff;
    transition: transform .18s ease, opacity .18s ease, background-color .18s ease, box-shadow .18s ease;
}
#footer-chat #send.publisher-btn i{ color: #ffffff; }
#footer-chat #send.show-button{
    background: #EF7926;
    box-shadow: 0 0 0 4px rgba(239, 121, 38, .18);
    animation: chatSendReady .28s ease;
}
#footer-chat #send.show-button:hover{ background: #f2853a; }
#footer-chat #send.show-button:active{ transform: scale(.92); }
@keyframes chatSendReady{
    0%{ transform: scale(.55); opacity: 0; }
    60%{ transform: scale(1.1); opacity: 1; }
    100%{ transform: scale(1); }
}
/* Foco visivel por teclado (acessibilidade) nos botoes */
#footer-chat .publisher-btn:focus-visible{
    outline: 2px solid #ffffff; outline-offset: 2px;
}
/* Estado desabilitado distinto */
#footer-chat .publisher-btn:disabled,
#footer-chat .publisher-input:disabled{
    opacity: .45; cursor: not-allowed; box-shadow: none;
}

/* ===== Botao Concluir: pilula rotulada, sem sobrepor o texto do rodape =====
   1) reposiciona acima do rodape (nao colide com o titulo/timer)
   2) vira pilula com rotulo "Concluir" (usa o data-label, sem mexer no HTML)
   4) remove o badge "1" (redundante com "1 conclusao restantes")
   5) feedback de :active / :focus-visible */
#footer-chat #encerrar.btn-conclusao{
    position: absolute;
    top: 0; right: 14px; bottom: auto; left: auto;
    transform: translateY(calc(-100% - 8px));
    width: auto; height: auto; min-width: 0;
    padding: 7px 14px 7px 12px;
    border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; line-height: 1;
    box-shadow: 0 6px 16px rgba(28, 187, 140, .30);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
#footer-chat #encerrar.btn-conclusao::before{ content: none; }
#footer-chat #encerrar.btn-conclusao::after{
    content: attr(data-label);
    font-size: 13px; font-weight: 600; color: #ffffff; line-height: 1;
}
#footer-chat #encerrar.btn-conclusao i{ font-size: 13px; }
#footer-chat #encerrar .chat-conclude-badge{ display: none; }
#footer-chat #encerrar.btn-conclusao:hover{ filter: brightness(1.05); }
#footer-chat #encerrar.btn-conclusao:active{ transform: translateY(calc(-100% - 8px)) scale(.95); }
#footer-chat #encerrar.btn-conclusao:focus-visible{ outline: 2px solid #ffffff; outline-offset: 2px; }
body.chat-keyboard-open #footer-chat #encerrar{ bottom: auto; }

/* ===================================================================
   Redesign da area de acoes do chat (cliente) - proximo ao print
   (interacoes com icone / callout / divisor / linha Concluir / input
   com audio + separador + enviar / helper "Pressione Enter")
   =================================================================== */
/* Icone antes de "Voce tem N interacoes" */
.page-container.user #footer-chat .chat-interacoes-line{
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.page-container.user #footer-chat .chat-interacoes-ico{
    display: inline-flex; width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
    background: #efe2f2; align-items: center; justify-content: center;
}
.page-container.user #footer-chat .chat-interacoes-ico svg{ width: 15px; height: 15px; }
/* Variante do icone no estado "sem interacoes" (laranja da marca) */
.page-container.user #footer-chat .chat-interacoes-ico--empty{ background: rgba(239, 121, 38, 0.14); }

/* ---- Estado "sem interacoes": acoes (adquirir / concluir) ---- */
.page-container.user #footer-chat #contador-conclusao{ font-weight: 700; color: #EF7926; }
.page-container.user #footer-chat #contador-conclusao.text-danger{ color: #e0483d; }

.page-container.user #footer-chat .chat-empty-actions{
    display: flex; flex-direction: column; gap: 8px; margin: 4px 14px 8px;
}
.page-container.user #footer-chat .chat-empty-actions .btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; border-radius: 12px; line-height: 1; white-space: nowrap;
    transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.page-container.user #footer-chat .chat-empty-actions .btn:active{ transform: translateY(1px); }

/* Botao primario: adquirir interacoes (laranja da marca) */
.page-container.user #footer-chat .chat-btn-buy{
    padding: 13px 16px; background: #EF7926; color: #fff; border: none;
    font-size: 14px; font-weight: 700; box-shadow: 0 4px 12px rgba(239, 121, 38, 0.26);
}
.page-container.user #footer-chat .chat-btn-buy:hover{ background: #e06a1c; color: #fff; }
.page-container.user #footer-chat .chat-btn-buy:active{ box-shadow: 0 2px 6px rgba(239, 121, 38, 0.26); }
.page-container.user #footer-chat .chat-btn-buy svg{ width: 18px; height: 18px; flex: 0 0 auto; }

/* Botao secundario: concluir agora (contorno verde, igual ao concluir padrao) */
.page-container.user #footer-chat .chat-btn-conclude-now{
    padding: 10px 16px; background: #ffffff; color: #159b73; border: 1.5px solid #1cbb8c;
    font-size: 13px; font-weight: 600;
}
.page-container.user #footer-chat .chat-btn-conclude-now:hover{ background: #f0fbf7; color: #159b73; }
.page-container.user #footer-chat .chat-btn-conclude-now svg{ width: 16px; height: 16px; flex: 0 0 auto; }

/* Divisor tracejado entre a info e as acoes */
.page-container.user #footer-chat .chat-actions-sep{
    border-top: 1px dashed #d9c7e0; margin: 12px 14px 10px;
}

/* Linha Concluir: rotulo (esq) + botao (dir) */
.page-container.user #footer-chat .chat-conclude-row{
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 14px 12px;
}
.page-container.user #footer-chat .chat-conclude-row__label{
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: #2C0D2C; font-weight: 500; line-height: 1.2;
}
.page-container.user #footer-chat .chat-conclude-row__label svg{ width: 16px; height: 16px; color: #7a3fa0; flex: 0 0 auto; }

/* Botao "Concluir atendimento" (contorno verde) - reusa #encerrar como pilula em linha */
.page-container.user #footer-chat #encerrar.btn-conclusao{
    position: static; top: auto; right: auto; bottom: auto; transform: none;
    width: auto; height: auto; min-width: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 0 !important;
    background: #ffffff; color: #159b73; border: 1.5px solid #1cbb8c;
    font-size: 13px; font-weight: 600; line-height: 1; box-shadow: none; white-space: nowrap;
    transition: background-color .15s ease, transform .15s ease;
}
.page-container.user #footer-chat #encerrar.btn-conclusao::after{ content: attr(data-label); color: #159b73; font-weight: 600; }
.page-container.user #footer-chat #encerrar.btn-conclusao i{ color: #159b73; font-size: 13px; }
.page-container.user #footer-chat #encerrar.btn-conclusao:hover{ background: #eafaf4; }
.page-container.user #footer-chat #encerrar.btn-conclusao:active{ transform: scale(.96); }
.page-container.user #footer-chat #encerrar .chat-conclude-badge{ display: none; }

/* Input: audio dentro da pilula + separador + enviar */
.page-container.user #footer-chat .chat-audio-btn{
    flex: 0 0 auto; width: 34px; height: 34px; border: 0; background: transparent;
    color: rgba(255,255,255,.85); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 50%; margin-right: 4px;
}
.page-container.user #footer-chat .chat-audio-btn:hover{ background: rgba(255,255,255,.12); }
.page-container.user #footer-chat .chat-audio-btn svg{ width: 20px; height: 20px; }
.page-container.user #footer-chat .chat-input-sep{
    flex: 0 0 auto; width: 1px; height: 26px; background: rgba(44,13,44,.18); margin: 0 8px; align-self: center;
    display: none;
}
/* O divisor aparece junto com o botao de enviar (some quando o enviar esta oculto) */
.page-container.user #footer-chat .publisher:has(#send.show-button) .chat-input-sep{ display: block; }
/* Helper "Pressione Enter para enviar" */
.page-container.user #footer-chat .chat-input-hint{
    margin: 6px 20px 0; font-size: 11px; color: #6b5a6b; text-align: left;
}
/* Esconde a linha Concluir inteira quando o botao esta oculto (ex.: inicio, cliente sem interacoes usadas) */
.page-container.user #footer-chat .chat-conclude-row:has(#encerrar.hide-button){ display: none; }

/* ===== Mesma area de acoes no lado do ADVOGADO (.advg) ===== */
.page-container.advg #footer-chat .chat-actions-sep{
    border-top: 1px dashed #d9c7e0; margin: 12px 14px 10px;
}
.page-container.advg #footer-chat .chat-conclude-row{
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 14px 12px;
}
.page-container.advg #footer-chat .chat-conclude-row__label{
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: #2C0D2C; font-weight: 500; line-height: 1.2;
}
.page-container.advg #footer-chat .chat-conclude-row__label svg{ width: 16px; height: 16px; color: #7a3fa0; flex: 0 0 auto; }
.page-container.advg #footer-chat #encerrar.btn-conclusao{
    position: static; top: auto; right: auto; bottom: auto; transform: none;
    width: auto; height: auto; min-width: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 0 !important;
    background: #ffffff; color: #159b73; border: 1.5px solid #1cbb8c;
    font-size: 13px; font-weight: 600; line-height: 1; box-shadow: none; white-space: nowrap;
    transition: background-color .15s ease, transform .15s ease;
}
.page-container.advg #footer-chat #encerrar.btn-conclusao::after{ content: attr(data-label); color: #159b73; font-weight: 600; }
.page-container.advg #footer-chat #encerrar.btn-conclusao i{ color: #159b73; font-size: 13px; }
.page-container.advg #footer-chat #encerrar.btn-conclusao:hover{ background: #eafaf4; }
.page-container.advg #footer-chat #encerrar.btn-conclusao:active{ transform: scale(.96); }
.page-container.advg #footer-chat #encerrar .chat-conclude-badge{ display: none; }
.page-container.advg #footer-chat .chat-audio-btn{
    flex: 0 0 auto; width: 34px; height: 34px; border: 0; background: transparent;
    color: rgba(255,255,255,.85); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; border-radius: 50%; margin-right: 4px;
}
.page-container.advg #footer-chat .chat-audio-btn:hover{ background: rgba(255,255,255,.12); }
.page-container.advg #footer-chat .chat-audio-btn svg{ width: 20px; height: 20px; }
.page-container.advg #footer-chat .chat-input-sep{
    flex: 0 0 auto; width: 1px; height: 26px; background: rgba(44,13,44,.18); margin: 0; align-self: center; display: none;
}
.page-container.advg #footer-chat .publisher:has(#send.show-button) .chat-input-sep{ display: block; }
.page-container.advg #footer-chat .chat-input-hint{
    margin: 6px 20px 0; font-size: 11px; color: #6b5a6b; text-align: left;
}
.page-container.advg #footer-chat .chat-conclude-row:has(#encerrar.hide-button){ display: none; }

/* ===================================================================
   Tela "Prontinho" (cliente aguardando / analise) - redesign
   =================================================================== */
.chat-waiting-screen .waiting-ico{ width:74px;height:74px;border-radius:50%;background:#efe2f2;display:flex;align-items:center;justify-content:center;margin:8px auto 14px; }
.chat-waiting-screen .waiting-ico svg{ width:38px;height:38px;color:#7a3fa0; }
.chat-waiting-screen .waiting-title{ font-size:22px;font-weight:700;color:#2C0D2C;text-align:center;margin:0 0 4px; }
.chat-waiting-screen .waiting-sub{ color:#6b5a6b;text-align:center;margin:0 0 18px; }
.chat-waiting-screen .waiting-avatar{ position:relative;width:120px;margin:0 auto 12px; }
.chat-waiting-screen .waiting-avatar .image-profile{ width:120px;height:120px;border-radius:50%;overflow:hidden;border:3px solid #e6d7ea; }
.chat-waiting-screen .waiting-avatar .image-profile img{ width:100%;height:100%;object-fit:cover;display:block; }
.chat-waiting-screen .waiting-avatar__dot{ position:absolute;right:8px;bottom:8px;width:20px;height:20px;border-radius:50%;background:#1cbb8c;border:3px solid #fff; }
/* Avatar generico enquanto so esta ofertando (advogado ainda nao aceitou) */
.chat-waiting-screen .waiting-avatar__searching{ width:120px;height:120px;border-radius:50%;background:#f3edf7;border:3px solid #e6d7ea;display:flex;align-items:center;justify-content:center;animation:waitingSearchPulse 1.6s ease-in-out infinite; }
.chat-waiting-screen .waiting-avatar__searching svg{ width:46px;height:46px; }
@keyframes waitingSearchPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(239,121,38,.18); } 50%{ box-shadow:0 0 0 12px rgba(239,121,38,0); } }
.chat-waiting-screen .waiting-name{ font-size:18px;font-weight:700;color:#2C0D2C;text-align:center;margin:0; }
.chat-waiting-screen .waiting-role{ font-size:14px;color:#8a7f8c;text-align:center;margin:0 0 16px; }
.chat-waiting-screen .waiting-callout{ display:flex;align-items:flex-start;gap:12px;background:#f3edf7;border-radius:14px;padding:14px 16px; }
.chat-waiting-screen .waiting-callout__ico{ flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#7a3fa0;color:#fff;font-weight:700;font-style:italic;display:flex;align-items:center;justify-content:center;font-size:15px; }
.chat-waiting-screen .waiting-callout p{ margin:0;line-height:1.45;color:#3a2f3c; }
.chat-waiting-screen .waiting-callout b{ color:#2C0D2C; }
.chat-waiting-screen .waiting-sep,
.opening-analise .waiting-sep{ border-top:1px dashed #d9c7e0;margin:18px 4px; }
.chat-waiting-screen .waiting-status{ display:flex;align-items:center;gap:12px; }
.chat-waiting-screen .waiting-status__ico{ flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#fdeede;display:flex;align-items:center;justify-content:center; }
.chat-waiting-screen .waiting-status__ico svg{ width:22px;height:22px;color:#EF7926; }
.chat-waiting-screen .waiting-status__label{ flex:1 1 auto;margin:0;font-weight:700;color:#2C0D2C;line-height:1.25; }
.chat-waiting-screen .waiting-status__div{ width:1px;align-self:stretch;min-height:40px;background:#e6d7ea; }
.chat-waiting-screen .waiting-status__time{ flex:0 0 auto;text-align:center; }
.chat-waiting-screen .waiting-status__time time{ display:block;font-size:26px;font-weight:700;color:#2C0D2C;line-height:1; }
.chat-waiting-screen .waiting-status__time small{ color:#8a7f8c;font-size:11px; }
.chat-waiting-screen .waiting-actions{ display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:auto;padding-top:18px; }
.chat-waiting-screen .waiting-actions .btn{ min-height:52px;border-radius:12px;font-weight:700; }
.chat-waiting-screen #cancel-search-btn{ display:flex;align-items:center;justify-content:center;gap:8px; }
.chat-waiting-screen #cancel-search-btn::before{ content:"";width:20px;height:20px;flex:0 0 auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E") center/contain no-repeat; }
.chat-waiting-screen #skip-lawyer-wrap .btn{ font-weight:600; }

/* ===== Tela chat-opening (analise do advogado): card preenche ate o footer =====
   Sem altura no main/page-overflow/body-content, o h-100 do .opening-analise nao
   preenchia e o card nao chegava ao footer. Aqui o footer entra no fluxo e a
   cadeia flex preenche a area util (mesma abordagem do chat). */
body:has(main.chat-opening){ display: flex; flex-direction: column; }
body:has(main.chat-opening) > main.chat-opening{ flex: 1 1 auto; min-height: 0; }
body:has(main.chat-opening) > footer.footer.fixed-bottom{ position: static; padding-bottom: 0.5rem; }
main.chat-opening > .container{ height: 100%; min-width: 0; display: flex; flex-direction: column; }
main.chat-opening .page-overflow{ flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
main.chat-opening .page-overflow > .card-body.body-content{ flex: 1 1 auto; min-height: 0; padding-bottom: 14px; display: flex; flex-direction: column; }
/* Botoes (Passar/Aceitar) FIXOS acima do footer; o conteudo da analise (pergunta,
   valor, status) ROLA. Evita os botoes serem cortados em telas baixas / mobile. */
main.chat-opening .chat-opening-screen{ flex: 1 1 auto; min-height: 0; }
main.chat-opening .opening-top{ flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
main.chat-opening .chat-opening-footer{ flex: 0 0 auto; }

/* ===== Modal "Passar atendimento" (advogado) - branded + motivos modernos ===== */
.passar-modal{ text-align: center; }
.passar-modal__badge{ width:74px;height:74px;margin:2px auto 12px;border-radius:50%;background:rgba(239,121,38,.14);box-shadow:0 0 0 8px rgba(239,121,38,.05);display:flex;align-items:center;justify-content:center; }
.passar-modal__badge svg{ width:36px;height:36px;color:#EF7926; }
.passar-modal__title{ font-weight:700;font-size:1.1rem;color:#EF7926;margin:0 0 4px; }
.passar-modal__sub{ color:rgba(255,255,255,.72);font-size:13px;margin:0 0 16px; }
.passar-reasons{ text-align:left; }
/* Cards de motivo no fundo escuro do modal (roxo da marca): transparente com
   borda clara, texto branco; selecionado ganha borda/preenchimento laranja. */
.passar-reason{ display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.16);border-radius:14px;padding:17px 18px;margin-bottom:10px;cursor:pointer;transition:border-color .15s ease, background-color .15s ease; }
.passar-reason:hover{ border-color:rgba(255,255,255,.30); }
.passar-reason__input{ position:absolute;opacity:0;pointer-events:none; }
.passar-reason__label{ font-size:15px;font-weight:500;color:#fff;line-height:1.2; }
.passar-reason__mark{ flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.38);background:transparent;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease, border-color .15s ease; }
.passar-reason__mark svg{ width:15px;height:15px;color:#fff;opacity:0;transition:opacity .15s ease; }
.passar-reason:has(.passar-reason__input:checked){ border-color:#EF7926;background:rgba(239,121,38,.12); }
.passar-reason:has(.passar-reason__input:checked) .passar-reason__mark{ background:#EF7926;border-color:#EF7926; }
.passar-reason:has(.passar-reason__input:checked) .passar-reason__mark svg{ opacity:1; }
.passar-reasons__other{ display:none;margin-top:2px; }
.passar-reasons:has(#item_4:checked) .passar-reasons__other{ display:block; }
.passar-reasons__other input{ border-radius:12px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16);color:#fff;padding:12px 14px; }
.passar-reasons__other input::placeholder{ color:rgba(255,255,255,.5); }
.passar-reasons__other input:focus{ border-color:#EF7926;background:rgba(255,255,255,.08);color:#fff;box-shadow:none; }

/* ---- Modal "Nao e minha especialidade": indicar especialidade correta ---- */
.recusa-esp{ text-align:center; }
.recusa-esp__badge{ width:74px;height:74px;margin:2px auto 12px;border-radius:50%;background:rgba(239,121,38,.14);box-shadow:0 0 0 8px rgba(239,121,38,.05);display:flex;align-items:center;justify-content:center; }
.recusa-esp__badge svg{ width:34px;height:34px;color:#EF7926; }
.recusa-esp__title{ font-weight:700;font-size:1.15rem;color:#fff;margin:0 0 6px; }
.recusa-esp__sub{ color:rgba(255,255,255,.72);font-size:13px;line-height:1.4;margin:0 auto 18px;max-width:320px; }
.recusa-esp__form{ text-align:left; }
.recusa-esp__field-label{ display:block;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.8);margin:0 0 8px 2px; }
.recusa-esp__select{ position:relative; }
.recusa-esp__control{ width:100%;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16);border-radius:12px;color:#fff;font-size:15px;padding:13px 40px 13px 14px;line-height:1.2;transition:border-color .15s ease, background-color .15s ease; }
.recusa-esp__control:focus{ outline:none;border-color:#EF7926;background:rgba(255,255,255,.08);box-shadow:none; }
.recusa-esp__control option{ color:#2C0D2C;background:#fff; }
.recusa-esp__control:invalid{ color:rgba(255,255,255,.5); }
.recusa-esp__chevron{ position:absolute;top:50%;right:12px;transform:translateY(-50%);pointer-events:none;display:flex;color:rgba(255,255,255,.6); }
.recusa-esp__chevron svg{ width:18px;height:18px; }

/* Badge de fundo do icone nas telas de espera (WaitingPayment advogado) */
.pix-screen .status-ico{
    display: inline-flex; align-items: center; justify-content: center;
    width: 84px; height: 84px; border-radius: 50%;
    background: rgba(239,121,38,.12); box-shadow: 0 0 0 8px rgba(239,121,38,.05);
}
.pix-screen .status-ico svg{ width: 40px; height: 40px; }

/* --- Altura do #bodyCard.app-card-screen agora via CSS (flex-fill), substitui o
   min-height inline do JS antigo (screen.layoutSimpleBodyCard). O card preenche
   entre o header e o footer sem numero magico; footer vai pro fluxo. Cobre todas
   as telas app-card-screen (WaitingPayment, chat-waiting, chat-notAdv, chat-sem-
   interacao, tutorial, 404, chat-load). Degrada bem em webview sem :has. --- */
body:has(#bodyCard.app-card-screen){ display: flex; flex-direction: column; }
body:has(#bodyCard.app-card-screen) > main{ flex: 1 1 auto; min-height: 0; align-items: stretch !important; }
body:has(#bodyCard.app-card-screen) > footer.footer.fixed-bottom{ position: static; padding-bottom: 0.5rem; }
main:has(#bodyCard.app-card-screen) > .container{ display: flex; flex-direction: column; min-width: 0; }
#bodyCard.app-card-screen{ flex: 1 1 auto; min-height: 0; }
/* chat-waiting (analise): em telas baixas (ex.: 1280x720) as acoes "Cancelar" e
   "Pular advogado" ficavam sob o footer sem rolagem. O card rola dentro do espaco
   entre header e footer. */
main:has(#bodyCard.chat-waiting-screen) > .container{ flex: 1 1 auto; min-height: 0; }
#bodyCard.app-card-screen.chat-waiting-screen{ overflow-y: auto; overscroll-behavior: contain; }