/* =========================================================
   ZAIRUTA · PANTALLAS DE ACCESO
   ========================================================= */

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

body.z-auth-body{
    margin:0;
    padding:0;
    min-height:100vh;
    background:var(--mist);
    color:var(--ink);
    font-family:"Source Sans 3",sans-serif;
}

.z-auth-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(420px,1.05fr) minmax(420px,.95fr);
}


/* =========================================================
   PANEL DE MARCA
   ========================================================= */

.z-auth-brand-panel{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:46px 56px;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(242,169,59,.22),
            transparent 31%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(27,122,79,.17),
            transparent 32%
        ),
        var(--navy);
    color:white;
}

.z-auth-brand-panel::after{
    content:"";
    position:absolute;
    width:440px;
    height:440px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:50%;
    right:-180px;
    bottom:-170px;
}

.z-auth-brand{
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:12px;
    width:max-content;
    color:white;
    text-decoration:none;
    font:700 21px "Sora",sans-serif;
}

.z-auth-brand img{
    display:block;
    width:43px;
    height:49px;
}

.z-auth-message{
    position:relative;
    z-index:2;
    max-width:590px;
    margin:auto 0;
    padding:80px 0;
}

.z-auth-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.11);
    color:#DCE5EC;
    font-size:13px;
    font-weight:600;
}

.z-auth-eyebrow-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--amber);
    box-shadow:0 0 0 5px rgba(242,169,59,.14);
}

.z-auth-message h1{
    max-width:560px;
    margin:23px 0 18px;
    color:white;
    font:700 clamp(42px,5.3vw,72px)/1.01 "Sora",sans-serif;
    letter-spacing:-.055em;
}

.z-auth-message p{
    max-width:530px;
    margin:0;
    color:#C5D1DB;
    font-size:18px;
    line-height:1.58;
}

.z-auth-points{
    position:relative;
    z-index:2;
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    color:#C7D3DC;
    font-size:13px;
}

.z-auth-point{
    display:flex;
    align-items:center;
    gap:8px;
}

.z-auth-point-check{
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(242,169,59,.16);
    color:var(--amber);
    font-size:12px;
    font-weight:700;
}


/* =========================================================
   PANEL FORMULARIO
   ========================================================= */

.z-auth-form-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px;
    background:var(--mist);
}

.z-auth-form-wrap{
    width:100%;
    max-width:430px;
}

.z-auth-mobile-brand{
    display:none;
}

.z-auth-form-wrap h2{
    margin:0;
    color:var(--navy);
    font:700 34px/1.15 "Sora",sans-serif;
    letter-spacing:-.035em;
}

.z-auth-intro{
    margin:9px 0 31px;
    color:var(--slate);
    font-size:16px;
    line-height:1.5;
}

.z-auth-card{
    padding:29px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:0 18px 55px rgba(15,47,79,.08);
}

.z-auth-label{
    display:block;
    margin:0 0 7px;
    color:var(--ink);
    font-size:14px;
    font-weight:600;
}

.z-auth-label + .z-auth-field{
    margin-bottom:19px;
}

.z-auth-field{
    width:100%;
    height:51px;
    padding:0 15px;
    border:1px solid var(--line);
    border-radius:13px;
    outline:none;
    background:#fff;
    color:var(--ink);
    font:500 16px "Source Sans 3",sans-serif;
    transition:border-color .15s ease, box-shadow .15s ease;
}

.z-auth-field::placeholder{
    color:#98A5B2;
}

.z-auth-field:focus{
    border-color:var(--navy);
    box-shadow:0 0 0 3px rgba(15,47,79,.08);
}

.z-auth-forgot{
    display:flex;
    justify-content:flex-end;
    margin:-7px 0 20px;
}

.z-auth-forgot a{
    color:var(--navy);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
}

.z-auth-forgot a:hover{
    text-decoration:underline;
}

.z-auth-submit{
    width:100%;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:13px;
    background:var(--amber);
    color:var(--ink);
    font:700 16px "Source Sans 3",sans-serif;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(242,169,59,.22);
    transition:transform .15s ease, background .15s ease;
}

.z-auth-submit:hover{
    transform:translateY(-1px);
    background:#F5B54C;
}

.z-auth-error{
    margin-bottom:18px;
    padding:12px 14px;
    border:1px solid #F3C5CB;
    border-radius:12px;
    background:var(--red-soft);
    color:#8A1526;
    font-size:14px;
}

.z-auth-help{
    margin:22px 0 0;
    text-align:center;
    color:var(--slate);
    font-size:13px;
}

.z-auth-help a{
    color:var(--navy);
    font-weight:600;
    text-decoration:none;
}

.z-auth-help a:hover{
    text-decoration:underline;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

    .z-auth-shell{
        grid-template-columns:1fr;
    }

    .z-auth-brand-panel{
        display:none;
    }

    .z-auth-form-panel{
        min-height:100vh;
        padding:30px 20px;
    }

    .z-auth-form-wrap{
        max-width:440px;
    }

    .z-auth-mobile-brand{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        margin-bottom:38px;
        color:var(--navy);
        text-decoration:none;
        font:700 20px "Sora",sans-serif;
    }

    .z-auth-mobile-brand img{
        width:39px;
        height:45px;
    }

    .z-auth-form-wrap h2,
    .z-auth-intro{
        text-align:center;
    }

}


@media(max-width:520px){

    .z-auth-form-panel{
        align-items:flex-start;
        padding:
            max(28px,env(safe-area-inset-top))
            16px
            30px;
    }

    .z-auth-mobile-brand{
        margin:12px 0 31px;
    }

    .z-auth-form-wrap h2{
        font-size:29px;
    }

    .z-auth-intro{
        margin-bottom:24px;
        font-size:15px;
    }

    .z-auth-card{
        padding:23px 19px;
        border-radius:19px;
    }

}



/* =========================================================
   ZAIRUTA · RESTO DE PANTALLAS PÚBLICAS
   recuperar contraseña
   nueva contraseña
   invitaciones familiares
   ========================================================= */

body.z-auth-simple-body{
    margin:0 !important;
    min-height:100vh;
    padding:0 !important;
    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(242,169,59,.10),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 90%,
            rgba(27,122,79,.08),
            transparent 27%
        ),
        var(--mist) !important;
    color:var(--ink);
    font-family:"Source Sans 3",sans-serif !important;
}


.z-auth-simple-main{
    width:100%;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:
        max(32px,env(safe-area-inset-top))
        20px
        max(32px,env(safe-area-inset-bottom));
}


.z-auth-simple-brand{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:27px;
    color:var(--navy) !important;
    text-decoration:none !important;
    font:700 21px "Sora",sans-serif;
    letter-spacing:-.02em;
}


.z-auth-simple-brand img{
    width:42px;
    height:48px;
    display:block;
}


.z-auth-simple-frame{
    width:100%;
    max-width:480px;
}


body.z-auth-join .z-auth-simple-frame{
    max-width:720px;
}


/*
 * Ocultar antiguos logos dibujados con CSS.
 * El logo oficial ya aparece arriba.
 */

.z-auth-simple-frame > .logo,
.z-auth-simple-frame .logo{
    display:none !important;
}


/*
 * Tarjetas antiguas de estas páginas.
 */

.z-auth-simple-frame .card,
.z-auth-simple-frame .panel,
.z-auth-simple-frame .box{
    width:100% !important;
    max-width:none !important;
    margin:0 auto 16px !important;
    padding:30px 28px !important;
    background:var(--surface) !important;
    border:1px solid var(--line) !important;
    border-radius:22px !important;
    box-shadow:
        0 18px 55px
        rgba(15,47,79,.08) !important;
}


/*
 * Cuando la página no utiliza una clase .card.
 */

.z-auth-simple-frame > h1:first-of-type,
.z-auth-simple-frame > h2:first-of-type{
    margin-top:0;
}


/* Títulos */

.z-auth-simple-frame h1,
.z-auth-simple-frame h2,
.z-auth-simple-frame h3{
    color:var(--navy) !important;
    font-family:"Sora",sans-serif !important;
    letter-spacing:-.03em !important;
}


.z-auth-simple-frame h1{
    font-size:30px !important;
    line-height:1.15 !important;
}


.z-auth-simple-frame h2{
    line-height:1.2 !important;
}


/* Textos secundarios */

.z-auth-simple-frame .subtitle,
.z-auth-simple-frame .muted,
.z-auth-simple-frame .hint,
.z-auth-simple-frame .help,
.z-auth-simple-frame p{
    color:var(--slate);
}


/* Etiquetas */

.z-auth-simple-frame label{
    display:block;
    color:var(--ink) !important;
    font-family:"Source Sans 3",sans-serif !important;
    font-size:14px !important;
    font-weight:600 !important;
}


/* Campos */

.z-auth-simple-frame input[type="text"],
.z-auth-simple-frame input[type="email"],
.z-auth-simple-frame input[type="password"],
.z-auth-simple-frame input[type="tel"],
.z-auth-simple-frame select,
.z-auth-simple-frame textarea{
    width:100% !important;
    min-height:50px;
    padding:12px 14px !important;
    border:1px solid var(--line) !important;
    border-radius:13px !important;
    outline:none !important;
    background:#fff !important;
    color:var(--ink) !important;
    font:500 16px "Source Sans 3",sans-serif !important;
}


.z-auth-simple-frame textarea{
    min-height:100px;
}


.z-auth-simple-frame input:focus,
.z-auth-simple-frame select:focus,
.z-auth-simple-frame textarea:focus{
    border-color:var(--navy) !important;
    box-shadow:
        0 0 0 3px
        rgba(15,47,79,.08) !important;
}


/* Botones principales */

.z-auth-simple-frame button,
.z-auth-simple-frame input[type="submit"],
.z-auth-simple-frame .btn-primary,
.z-auth-simple-frame .button-primary{
    border:0 !important;
    border-radius:13px !important;
    background:var(--amber) !important;
    color:var(--ink) !important;
    font-family:"Source Sans 3",sans-serif !important;
    font-size:16px !important;
    font-weight:700 !important;
    cursor:pointer;
    box-shadow:
        0 10px 24px
        rgba(242,169,59,.20) !important;
}


.z-auth-simple-frame button:hover,
.z-auth-simple-frame input[type="submit"]:hover{
    background:#F5B54C !important;
}


/* Links */

.z-auth-simple-frame a{
    color:var(--navy);
}


/* Mensajes */

.z-auth-simple-frame .success,
.z-auth-simple-frame .ok,
.z-auth-simple-frame .message-success{
    border-color:#BFDCCB !important;
    background:var(--green-soft) !important;
    color:var(--green-dark) !important;
}


.z-auth-simple-frame .error,
.z-auth-simple-frame .danger,
.z-auth-simple-frame .message-error{
    border-color:#F3C5CB !important;
    background:var(--red-soft) !important;
    color:#8A1526 !important;
}


/* Separadores */

.z-auth-simple-frame hr{
    border:0;
    border-top:1px solid var(--line);
}


/* Pie común */

.z-auth-simple-footer{
    margin-top:20px;
    color:var(--slate);
    text-align:center;
    font-size:13px;
}


.z-auth-simple-footer a{
    color:var(--navy);
    font-weight:600;
    text-decoration:none;
}


.z-auth-simple-footer a:hover{
    text-decoration:underline;
}


@media(max-width:560px){

    .z-auth-simple-main{
        justify-content:flex-start;
        padding-left:15px;
        padding-right:15px;
    }

    .z-auth-simple-brand{
        margin-top:6px;
        margin-bottom:25px;
    }

    .z-auth-simple-frame .card,
    .z-auth-simple-frame .panel,
    .z-auth-simple-frame .box{
        padding:23px 19px !important;
        border-radius:19px !important;
    }

}