/* =========================================================
   RECUPERAR SENHA V193
   Visual moderno integrado ao tema do escritório virtual.
   ========================================================= */

.recuperar-senha-page{
    --rec-primary:var(--app-primary,#334155);
    --rec-primary-dark:var(--app-primary-dark,var(--rec-primary));
    --rec-secondary:var(--app-secondary,#475569);
    --rec-accent:var(--app-accent,#64748b);
    --rec-bg:var(--app-bg,#f8fafc);
    --rec-surface:var(--app-surface,#ffffff);
    --rec-soft:var(--app-surface-soft,#f1f5f9);
    --rec-text:var(--app-text,#0f172a);
    --rec-muted:var(--app-muted,#64748b);
    --rec-border:var(--app-border,#cbd5e1);
    --rec-success:var(--app-success,#16a34a);
    --rec-danger:var(--app-danger,#dc2626);
    --rec-button-text:var(--app-text-button,var(--app-button-text,#ffffff));
    --rec-radius-sm:var(--app-radius-sm,10px);
    --rec-radius-md:var(--app-radius,16px);
    --rec-radius-lg:var(--app-radius-lg,22px);
    --rec-shadow:var(--app-shadow,0 12px 30px rgba(15,23,42,.10));
    --rec-shadow-strong:var(--app-shadow-lg,var(--rec-shadow));

    min-height:100vh;
    margin:0;
    padding:0;
    overflow-x:hidden;
    background:var(--rec-bg);
    color:var(--rec-text);
    font-family:Arial,Helvetica,sans-serif;
    line-height:1.5;
}

.recuperar-senha-page *,
.recuperar-senha-page *::before,
.recuperar-senha-page *::after{
    box-sizing:border-box;
}

.recuperar-senha-page button,
.recuperar-senha-page input{
    font:inherit;
}

.recuperar-senha-page a{
    color:inherit;
}

.recuperar-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:min(1120px,calc(100% - 24px));
    min-height:58px;
    margin:8px auto 0;
    padding:7px 10px;
    border:1px solid var(--rec-border);
    border-radius:var(--rec-radius-md);
    background:var(--rec-surface);
    box-shadow:0 7px 24px rgba(15,23,42,.05);
}

.recuperar-topbar__brand{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
    text-decoration:none;
}

.recuperar-topbar__mark{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:40px;
    height:40px;
    border-radius:var(--rec-radius-sm);
    background:var(--rec-primary);
    color:#ffffff;
}

.recuperar-topbar__mark svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.recuperar-topbar__brand>span:last-child{
    display:grid;
    min-width:0;
}

.recuperar-topbar__brand small{
    color:var(--rec-muted);
    font-size:8px;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.recuperar-topbar__brand strong{
    overflow:hidden;
    color:var(--rec-text);
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.recuperar-voltar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:38px;
    padding:7px 11px;
    border:1px solid var(--rec-border);
    border-radius:var(--rec-radius-sm);
    background:var(--rec-soft);
    color:var(--rec-text);
    text-decoration:none;
    font-size:9px;
    font-weight:850;
}

.recuperar-voltar:hover{
    border-color:var(--rec-primary);
    color:var(--rec-primary);
}

.recuperar-voltar svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.recuperar-shell{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(350px,.65fr);
    gap:16px;
    align-items:stretch;
    width:min(1120px,calc(100% - 24px));
    margin:14px auto 22px;
}

.recuperar-hero{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) 220px;
    align-items:center;
    min-height:430px;
    overflow:hidden;
    padding:38px;
    border-radius:var(--rec-radius-lg);
    background:linear-gradient(
        125deg,
        var(--rec-primary-dark),
        var(--rec-secondary)
    );
    color:var(--rec-button-text);
    box-shadow:var(--rec-shadow-strong);
}

.recuperar-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 82% 20%,rgba(255,255,255,.15),transparent 18rem),
        linear-gradient(90deg,rgba(255,255,255,.035),transparent 55%);
    pointer-events:none;
}

.recuperar-hero__copy{
    position:relative;
    z-index:2;
}

.recuperar-kicker{
    display:inline-flex;
    padding:7px 10px;
    border:1px solid color-mix(in srgb,var(--rec-button-text) 28%,transparent);
    border-radius:999px;
    background:color-mix(in srgb,var(--rec-button-text) 10%,transparent);
    color:#f8fafc;
    font-size:8px;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.recuperar-hero h1{
    margin:15px 0 8px;
    color:#f8fafc;
    font-size:clamp(34px,5vw,56px);
    line-height:1.02;
    letter-spacing:-.045em;
}

.recuperar-hero p{
    max-width:560px;
    margin:0;
    color:rgba(248,250,252,.92);
    font-size:13px;
    line-height:1.65;
}

.recuperar-hero__steps{
    display:grid;
    gap:8px;
    margin-top:24px;
}

.recuperar-hero__steps span{
    display:flex;
    align-items:center;
    gap:9px;
    width:max-content;
    max-width:100%;
    padding:8px 10px;
    border-radius:999px;
    background:color-mix(in srgb,var(--rec-button-text) 10%,transparent);
    color:#f8fafc;
    font-size:9px;
    font-weight:800;
}

.recuperar-hero__steps b{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:22px;
    height:22px;
    border-radius:50%;
    background:rgba(255,255,255,.16);
    font-size:8px;
}

.recuperar-hero__visual{
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    min-height:240px;
}

.recuperar-key{
    position:relative;
    z-index:3;
    display:grid;
    place-items:center;
    width:116px;
    height:116px;
    border:1px solid color-mix(in srgb,var(--rec-button-text) 25%,transparent);
    border-radius:34px;
    background:color-mix(in srgb,var(--rec-button-text) 12%,transparent);
    box-shadow:0 22px 50px rgba(0,0,0,.13);
    backdrop-filter:blur(10px);
    transform:rotate(-5deg);
}

.recuperar-key svg{
    width:58px;
    height:58px;
    fill:none;
    stroke:var(--rec-button-text);
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.recuperar-ring{
    position:absolute;
    border:1px solid color-mix(in srgb,var(--rec-button-text) 20%,transparent);
    border-radius:50%;
}

.recuperar-ring--one{
    width:200px;
    height:200px;
}

.recuperar-ring--two{
    width:270px;
    height:270px;
    opacity:.55;
}

.recuperar-card{
    align-self:center;
    overflow:hidden;
    border:1px solid var(--rec-border);
    border-radius:var(--rec-radius-lg);
    background:var(--rec-surface);
    box-shadow:var(--rec-shadow);
}

.recuperar-card__head{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:20px 20px 16px;
    border-bottom:1px solid var(--rec-border);
    background:linear-gradient(
        135deg,
        color-mix(in srgb,var(--rec-primary) 5%,var(--rec-surface)),
        var(--rec-surface)
    );
}

.recuperar-card__icon{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:39px;
    height:39px;
    border-radius:var(--rec-radius-sm);
    background:var(--rec-primary);
    color:#ffffff;
}

.recuperar-card__icon svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
}

.recuperar-card__head small{
    color:var(--rec-primary);
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.recuperar-card__head h2{
    margin:1px 0 2px;
    color:var(--rec-text);
    font-size:18px;
}

.recuperar-card__head p{
    margin:0;
    color:var(--rec-muted);
    font-size:9px;
    line-height:1.45;
}

.recuperar-alert{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin:16px 18px 0;
    padding:11px 12px;
    border:1px solid var(--rec-border);
    border-radius:var(--rec-radius-sm);
    font-size:9px;
    font-weight:750;
}

.recuperar-alert>span{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:20px;
    height:20px;
    border-radius:50%;
    color:#fff;
    font-size:10px;
    font-weight:900;
}

.recuperar-alert p{
    margin:1px 0 0;
    line-height:1.5;
}

.recuperar-alert.is-error{
    border-color:color-mix(in srgb,var(--rec-danger) 28%,var(--rec-border));
    background:color-mix(in srgb,var(--rec-danger) 7%,var(--rec-surface));
    color:var(--rec-danger);
}

.recuperar-alert.is-error>span{
    background:var(--rec-danger);
}

.recuperar-alert.is-success{
    border-color:color-mix(in srgb,var(--rec-success) 28%,var(--rec-border));
    background:color-mix(in srgb,var(--rec-success) 7%,var(--rec-surface));
    color:var(--rec-success);
}

.recuperar-alert.is-success>span{
    background:var(--rec-success);
}

.recuperar-form{
    display:grid;
    gap:14px;
    padding:20px;
}

.recuperar-field{
    display:grid;
    gap:6px;
}

.recuperar-field>span{
    color:var(--rec-text);
    font-size:9px;
    font-weight:850;
}

.recuperar-field__control{
    position:relative;
}

.recuperar-field__control svg{
    position:absolute;
    top:50%;
    left:12px;
    width:18px;
    height:18px;
    transform:translateY(-50%);
    fill:none;
    stroke:var(--rec-muted);
    stroke-width:1.8;
    pointer-events:none;
}

.recuperar-field input{
    width:100%;
    min-height:48px;
    padding:10px 12px 10px 40px;
    border:1px solid var(--rec-border);
    border-radius:var(--rec-radius-sm);
    outline:0;
    background:var(--rec-soft);
    color:var(--rec-text);
    font-size:12px;
}

.recuperar-field input::placeholder{
    color:var(--rec-muted);
}

.recuperar-field input:focus{
    border-color:var(--rec-primary);
    background:var(--rec-surface);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--rec-primary) 11%,transparent);
}

.recuperar-submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:100%;
    min-height:49px;
    padding:10px 16px;
    border:1px solid var(--rec-primary);
    border-radius:var(--rec-radius-sm);
    background:var(--rec-primary);
    color:#ffffff;
    font-size:10px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 8px 18px color-mix(in srgb,var(--rec-primary) 20%,transparent);
}

.recuperar-submit:hover{
    filter:brightness(.96);
}

.recuperar-submit svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.recuperar-form__note{
    margin:0;
    color:var(--rec-muted);
    font-size:8px;
    line-height:1.55;
    text-align:center;
}

.recuperar-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:min(1120px,calc(100% - 24px));
    margin:0 auto 18px;
    padding:0 3px;
    color:var(--rec-muted);
    font-size:8px;
}

@media(max-width:850px){
    .recuperar-topbar{
        min-height:54px;
        margin-top:5px;
    }

    .recuperar-voltar span{
        display:none;
    }

    .recuperar-voltar{
        width:38px;
        padding:0;
    }

    .recuperar-shell{
        grid-template-columns:1fr;
        margin-top:9px;
    }

    .recuperar-hero{
        grid-template-columns:1fr;
        min-height:0;
        padding:26px 20px;
    }

    .recuperar-hero__visual{
        display:none;
    }

    .recuperar-hero__steps{
        margin-top:18px;
    }

    .recuperar-card{
        align-self:stretch;
    }
}

@media(max-width:520px){
    .recuperar-topbar__brand strong{
        max-width:180px;
    }

    .recuperar-hero h1{
        font-size:34px;
    }

    .recuperar-card__head,
    .recuperar-form{
        padding-left:16px;
        padding-right:16px;
    }
}


/* =========================================================
   V194 - CONTRASTE FORÇADO EM ÁREAS ESCURAS
   Corrige casos em que o tema define texto escuro e o hero
   usa fundo escuro.
   ========================================================= */
.recuperar-hero,
.recuperar-hero *{
    color:#f8fafc;
}

.recuperar-kicker,
.recuperar-hero__steps span{
    color:#f8fafc!important;
}

.recuperar-hero p{
    color:rgba(248,250,252,.92)!important;
}

.recuperar-submit,
.recuperar-submit:hover,
.recuperar-submit:focus{
    color:#ffffff!important;
}

.recuperar-key svg,
.recuperar-ring,
.recuperar-topbar__mark{
    color:#ffffff;
}


/* =========================================================
   V195 - CORREÇÃO DEFINITIVA DO TÍTULO NO HERO
   O app.css global pode aplicar cor/gradiente/text-fill em H1.
   Aqui neutralizamos SOMENTE o título desta página.
   ========================================================= */

body.recuperar-senha-page .recuperar-hero h1,
body.recuperar-senha-page .recuperar-hero__copy h1{
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
    background:none!important;
    background-image:none!important;
    -webkit-background-clip:border-box!important;
    background-clip:border-box!important;
    text-shadow:none!important;
    opacity:1!important;
}

body.recuperar-senha-page .recuperar-hero h1::before,
body.recuperar-senha-page .recuperar-hero h1::after{
    display:none!important;
    content:none!important;
}

body.recuperar-senha-page .recuperar-kicker,
body.recuperar-senha-page .recuperar-hero__steps span,
body.recuperar-senha-page .recuperar-hero__steps b{
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
}

body.recuperar-senha-page .recuperar-hero p{
    color:rgba(255,255,255,.92)!important;
    -webkit-text-fill-color:rgba(255,255,255,.92)!important;
}


/* =========================================================
   V197 - FLUXO EM DUAS ETAPAS
   ========================================================= */

.recuperar-form input[type="password"]{
    letter-spacing:.02em;
}

.recuperar-alert.is-success + .recuperar-form{
    margin-top:0;
}


/* =========================================================
   V198 - BOTÃO APÓS TROCA DE SENHA
   ========================================================= */

.recuperar-login-final{
    display:grid;
    gap:9px;
    margin:16px 18px 0;
    padding:14px;
    border:1px solid color-mix(
        in srgb,
        var(--rec-success) 28%,
        var(--rec-border)
    );
    border-radius:var(--rec-radius-md);
    background:color-mix(
        in srgb,
        var(--rec-success) 7%,
        var(--rec-surface)
    );
}

.recuperar-login-final__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    width:100%;
    min-height:49px;
    padding:10px 16px;
    border:1px solid var(--rec-primary);
    border-radius:var(--rec-radius-sm);
    background:var(--rec-primary);
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
    font-size:10px;
    font-weight:900;
    text-decoration:none;
    box-shadow:0 8px 18px color-mix(
        in srgb,
        var(--rec-primary) 20%,
        transparent
    );
}

.recuperar-login-final__button:hover,
.recuperar-login-final__button:focus{
    color:#ffffff!important;
    -webkit-text-fill-color:#ffffff!important;
    filter:brightness(.96);
    text-decoration:none;
}

.recuperar-login-final__button svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.recuperar-login-final p{
    margin:0;
    color:var(--rec-muted);
    font-size:8px;
    line-height:1.5;
    text-align:center;
}


/* =========================================================
   V199 - SENHA SEM CADEADO + MOSTRAR/OCULTAR
   ========================================================= */

.recuperar-field__control--password input{
    padding-left:12px!important;
    padding-right:48px!important;
}

.recuperar-field__control--password > svg{
    display:none!important;
}

.recuperar-password-toggle{
    position:absolute;
    top:50%;
    right:6px;
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    margin:0;
    padding:0;
    transform:translateY(-50%);
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--rec-muted);
    cursor:pointer;
}

.recuperar-password-toggle:hover,
.recuperar-password-toggle:focus{
    background:var(--rec-soft);
    color:var(--rec-primary);
    outline:0;
}

.recuperar-password-toggle svg{
    position:static!important;
    width:19px!important;
    height:19px!important;
    transform:none!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.8!important;
    pointer-events:none;
}


/* =========================================================
   V200 - CAMPO LOGIN LIMPO
   Remove o ícone que estava se misturando com o texto.
   ========================================================= */

.recuperar-field__control--plain input{
    padding-left:12px!important;
    padding-right:12px!important;
}

.recuperar-field__control--plain > svg{
    display:none!important;
}