*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
}

body{
    min-height:100vh;

    background:
        radial-gradient(
            circle at top left,
            #edf5ff,
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #f4f7fb,
            #e8eef7
        );

    color:#1c304b;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.recovery-shell{
    min-height:100vh;

    display:grid;
    place-items:center;

    padding:28px 18px;
}

.recovery-card{
    width:min(500px,100%);

    overflow:hidden;

    border:1px solid #dbe4ef;
    border-radius:19px;

    background:#fff;

    box-shadow:
        0 24px 70px
        rgba(25,54,92,.15);
}

.recovery-brand{
    display:flex;
    align-items:center;

    gap:14px;

    padding:19px 24px;

    background:
        linear-gradient(
            120deg,
            #092d6b,
            #0d469b
        );

    color:#fff;
}

.recovery-brand img{
    width:75px;
    height:auto;
}

.recovery-brand span{
    display:block;

    margin-bottom:3px;

    color:#b9d2f5;

    font-size:9px;
    font-weight:900;

    letter-spacing:1px;
}

.recovery-brand strong{
    display:block;

    font-size:15px;
    font-weight:900;
}

.recovery-body{
    padding:30px 28px 28px;
}

.recovery-icon{
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    margin-bottom:15px;

    border-radius:13px;

    background:#eef4ff;

    font-size:22px;
}

.recovery-body h1{
    margin:0 0 8px;

    color:#17365d;

    font-size:22px;
    font-weight:900;
}

.recovery-description{
    margin:0 0 22px;

    color:#718197;

    font-size:11px;
    line-height:1.55;
}

.recovery-description strong{
    color:#38526f;
}

.recovery-label{
    display:block;

    margin:0 0 6px;

    color:#405873;

    font-size:9px;
    font-weight:900;
}

.recovery-space{
    margin-top:14px;
}

.recovery-input{
    width:100%;
    min-height:45px;

    padding:0 12px;

    border:1px solid #cad7e6;
    border-radius:10px;

    outline:none;

    background:#fbfcfe;

    color:#1b304a;

    font:inherit;
    font-size:12px;

    transition:.15s ease;
}

.recovery-input:focus{
    border-color:#2d68b4;

    background:#fff;

    box-shadow:
        0 0 0 3px
        rgba(32,91,165,.10);
}

.recovery-code{
    text-align:center;

    font-size:25px;
    font-weight:900;

    letter-spacing:9px;
}

.recovery-primary{
    width:100%;
    min-height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-top:18px;

    border:0;
    border-radius:10px;

    background:#103d86;

    color:#fff;

    cursor:pointer;

    text-decoration:none;

    font:inherit;
    font-size:10px;
    font-weight:900;
}

.recovery-primary:hover{
    background:#0b3374;
}

.recovery-anchor{
    padding:0 12px;
}

.recovery-back{
    display:block;

    margin-top:17px;

    color:#657b94;

    text-align:center;
    text-decoration:none;

    font-size:9px;
    font-weight:800;
}

.recovery-alert{
    margin-bottom:18px;

    padding:11px 12px;

    border-radius:9px;

    font-size:9.5px;
    font-weight:750;

    line-height:1.45;
}

.recovery-alert.error{
    border:1px solid #e9bdc2;

    background:#fff0f1;

    color:#963943;
}

.recovery-alert.success{
    border:1px solid #b6dbc4;

    background:#eff9f3;

    color:#286849;
}

.recovery-secondary-actions{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:18px;

    margin-top:17px;
}

.recovery-secondary-actions form{
    margin:0;
}

.recovery-link-button{
    padding:0;

    border:0;

    background:transparent;

    color:#245793;

    cursor:pointer;

    font:inherit;
    font-size:9px;
    font-weight:850;

    text-decoration:underline;
}

@media(max-width:540px){

    .recovery-shell{
        padding:12px;
    }

    .recovery-body{
        padding:24px 20px;
    }

    .recovery-brand{
        padding:17px 20px;
    }
}


/* ============================================================
   PANADERIA RUIZ · PASSWORD RECOVERY COUNTDOWN
   ============================================================ */

.recovery-countdown{
    display:flex;
    align-items:center;

    gap:14px;

    margin:
        0
        0
        20px;

    padding:
        14px
        15px;

    border:
        1px solid
        #bad0ec;

    border-radius:11px;

    background:#f1f6fd;
}


.recovery-countdown-icon{
    width:44px;
    height:44px;

    flex:0 0 44px;

    display:grid;
    place-items:center;

    border-radius:11px;

    background:#dfeafb;

    font-size:21px;
}


.recovery-countdown-content{
    flex:1;

    min-width:0;
}


.recovery-countdown-content span{
    display:block;

    margin-bottom:2px;

    color:#667b95;

    font-size:9px;
    font-weight:850;
}


.recovery-countdown-content strong{
    display:block;

    color:#0d347d;

    font-size:25px;
    font-weight:950;

    letter-spacing:1px;

    line-height:1.05;
}


.recovery-countdown-content small{
    display:block;

    margin-top:4px;

    color:#8392a5;

    font-size:8px;
    line-height:1.4;
}


.recovery-countdown.expired{
    border-color:#e5c16e;

    background:#fff8e7;
}


.recovery-countdown.expired
.recovery-countdown-icon{
    background:#ffecb5;
}


.recovery-countdown.expired
.recovery-countdown-content strong{
    color:#a56c00;
}


.recovery-resend:disabled{
    color:#aab4c0 !important;

    cursor:not-allowed !important;

    text-decoration:none !important;
}


.recovery-resend.ready{
    color:#0d4c98 !important;

    cursor:pointer !important;

    font-weight:900 !important;
}


@media(max-width:540px){

    .recovery-countdown{
        align-items:flex-start;
    }

}