/* =========================
RESET
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: var(--font-body);
}


/* =========================
VARIABLES
========================= */

/* =========================
BODY
========================= */

body{

height:100vh;

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

background:linear-gradient(135deg,#eef2f9,#dbe3f3);

}


/* =========================
WRAPPER
========================= */

.wrapper{

position:relative;

width:880px;
height:520px;

background:var(--warm-white);

border-radius:32px;

overflow:hidden;

box-shadow:0 25px 60px rgba(0,0,0,.12);

animation:wrapperEnter .8s var(--ease);

padding:18px;

}


@keyframes wrapperEnter{

0%{
opacity:0;
transform:translateY(40px) scale(.97);
}

100%{
opacity:1;
transform:translateY(0) scale(1);
}

}


/* =========================
FORM PANELS
========================= */

.panel{

position:absolute;

top:18px;

width:calc(50% - 36px);
height:calc(100% - 36px);

padding:40px;

display:flex;
flex-direction:column;
justify-content:center;

border-radius:24px;

transition:.8s var(--ease);

z-index:2;

}


/* LOGIN PANEL */

#login-panel{

left:18px;

}


/* REGISTER PANEL */

#registro-panel{

right:18px;

transform:translateX(100%);
opacity:0;

}


/* =========================
OVERLAY PANEL (AZUL)
========================= */

.switch{

position:absolute;

top:0px;
left:50%;

width:calc(55% - 36px);
height: 100%;

background:var(--primary);

color:var(--warm-white);

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

text-align:center;

padding:40px;

/* curva elegante tipo SaaS */

border-top-left-radius:260px;
border-bottom-left-radius:260px;

transition:

transform 1s var(--ease),
border-radius .8s var(--ease);

z-index:3;

}


/* =========================
OVERLAY MOVE
========================= */

.wrapper.modo-registro .switch{

transform:translateX(-100%);

border-top-left-radius:0;
border-bottom-left-radius:0;

border-top-right-radius:260px;
border-bottom-right-radius:260px;

}


/* =========================
LOGIN EXIT
========================= */

.wrapper.modo-registro #login-panel{

transform:translateX(-120%);
opacity:0;

pointer-events:none;

}

.btn-back {
    display: none;
}


/* =========================
REGISTER ENTRY
========================= */

.wrapper.modo-registro #registro-panel{

transform:translateX(0);
opacity:1;

pointer-events:auto;

}


/* =========================
HEADINGS
========================= */

.panel h2{

font-size:26px;
margin-bottom:22px;

}

.home-link{
position:absolute;
top:34px;
left:46px;
z-index:5;
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 13px;
border-radius:11px;
color:var(--primary);
font-size:14px;
font-weight:700;
text-decoration:none;
transition:.25s ease;
}

.wrapper.modo-registro .home-link{
left:46px;
color:#fefcfb;
}

.home-link svg{
width:18px;
height:18px;
fill:currentColor;
}

.home-link:hover,
.home-link:focus-visible{
background:#eef3fa;
transform:translateY(-2px);
outline:none;
box-shadow:0 6px 18px rgba(0,31,84,.12);
}


/* =========================
INPUTS
========================= */

input{

width:100%;

padding:14px;

margin-bottom:14px;

border:none;

border-radius:12px;

background:#f4f6fb;

font-size:14px;

transition:.25s ease;

}


input:focus{

background:var(--warm-white);

transform:translateY(-2px);

box-shadow:0 0 0 3px rgba(0,31,84,.12);

}

.password-field{position:relative;width:100%;}
.password-field input{padding-right:50px;}
.panel .password-toggle{
position:absolute;right:6px;top:6px;width:38px;height:38px;padding:0;margin:0;
display:grid;place-items:center;background:transparent;color:#526176;box-shadow:none;
}
.panel .password-toggle:hover{transform:none;background:#e8edf6;box-shadow:none;}
.eye-icon{position:relative;width:20px;height:13px;border:2px solid currentColor;border-radius:50% 50%;display:block;}
.eye-icon::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:currentColor;left:50%;top:50%;transform:translate(-50%,-50%);}
.password-toggle[aria-pressed="true"] .eye-icon::before{content:"";position:absolute;width:25px;height:2px;background:currentColor;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-42deg);box-shadow:0 0 0 2px #fefcfb;z-index:2;}

.auth-modal[hidden]{display:none;}
.auth-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:rgba(3,18,45,.56);backdrop-filter:blur(5px);}
.auth-modal__card{width:min(100%,390px);padding:30px;border-radius:24px;background:#fefcfb;text-align:center;box-shadow:0 24px 70px rgba(0,31,84,.28);animation:wrapperEnter .3s var(--ease);}
.auth-modal__icon{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 16px;border-radius:50%;background:#fff0f0;color:#b42318;font-size:28px;font-weight:800;}
.auth-modal__card h3{margin-bottom:10px;color:#13233d;font-size:22px;}
.auth-modal__card p{margin-bottom:22px;color:#607089;line-height:1.55;}
.auth-modal__card button{width:100%;padding:13px;border:0;border-radius:12px;background:var(--primary);color:#fefcfb;font-weight:700;cursor:pointer;}


/* =========================
PRIMARY BUTTON
========================= */

.panel button{

width:100%;

padding:14px;

border:none;

border-radius:12px;

background:var(--primary);

color:var(--warm-white);

font-weight:600;

font-size:14px;

cursor:pointer;

transition:.25s ease;

}


.panel button:hover{

transform:translateY(-3px);

background:var(--primary-hover);

box-shadow:0 12px 30px rgba(0,31,84,.28);

}


/* =========================
OVERLAY BUTTON
========================= */

.switch button{

width:190px;

padding:13px;

border-radius:12px;

background:transparent;

border:2px solid var(--warm-white);

color:var(--warm-white);

font-weight:600;

font-size:14px;

cursor:pointer;

margin-top:14px;

transition:.3s ease;

}


.switch button:hover{

background:var(--warm-white);
color:var(--primary);

transform:translateY(-2px);

}


/* =========================
OVERLAY TEXT SWITCH LOGIC
========================= */

/* ocultar YA TIENES CUENTA en login */

.wrapper:not(.modo-registro)
.switch h2:last-of-type,

.wrapper:not(.modo-registro)
.switch button:last-of-type{

display:none;

}


/* ocultar NUEVO USUARIO en registro */

.wrapper.modo-registro
.switch h2:first-of-type,

.wrapper.modo-registro
.switch p,

.wrapper.modo-registro
.switch button:first-of-type{

display:none;

}


/* =========================
OVERLAY TEXT ANIMATION
========================= */

.switch h2,
.switch p,
.switch button{

animation:overlayFade .5s ease;

}


@keyframes overlayFade{

from{

opacity:0;
transform:translateY(20px);

}

to{

opacity:1;
transform:translateY(0);

}

}


/* =========================
LINKS
========================= */

a{

margin-top:10px;

text-align:center;

font-size:13px;

color:#6b7280;

text-decoration:none;

transition:.2s;

}


a:hover{

transform:translateX(5px);

color:var(--primary);

}

/* =========================
RESPONSIVE SOLO CELULAR
========================= */

@media (max-width:768px){

body{
min-height:100vh;
height:auto;
padding:18px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#eef2f9,#dbe3f3);
}

.wrapper{
width:100%;
max-width:420px;
height:auto;
min-height:auto;
padding:0;
border-radius:28px;
overflow:hidden;
background:#fefcfb;
box-shadow:0 20px 55px rgba(0,0,0,.14);
animation:none;
}

.panel{
position:relative;
top:auto;
left:auto !important;
right:auto !important;
width:100%;
height:auto;
padding:76px 24px 26px;
border-radius:0;
display:flex;
flex-direction:column;
justify-content:center;
transform:none !important;
opacity:1 !important;
transition:none;
}

.home-link{
top:18px;
left:20px;
margin-top:0;
}

.wrapper.modo-registro .home-link{
left:20px;
color:var(--primary);
}

.panel.hidden{
display:none !important;
}

#login-panel,
#registro-panel{
transform:none !important;
opacity:1 !important;
pointer-events:auto;
}

.panel h2{
font-size:28px;
font-weight:800;
text-align:center;
margin-bottom:28px;
color:#0f172a;
}

/* BOTÓN VOLVER SOLO EN REGISTRO RESPONSIVE */
.btn-back{
display:inline-flex;
align-items:center;
justify-content:flex-start;
width:auto !important;
padding:0 !important;
margin-bottom:18px;
background:transparent !important;
border:none !important;
box-shadow:none !important;
color:var(--primary) !important;
font-size:14px !important;
font-weight:700;
cursor:pointer;
}

#login-panel .btn-back{
display:none !important;
}

.btn-back:hover{
background:transparent !important;
color:var(--primary-hover) !important;
transform:none !important;
box-shadow:none !important;
}

input{
width:100%;
padding:16px 18px;
margin-bottom:16px;
border:none;
outline:none;
border-radius:16px;
background:#f3f5fb;
font-size:15px;
color:#111827;
}

input::placeholder{
color:#7b8190;
}

input:focus{
background:#fefcfb;
transform:none;
box-shadow:0 0 0 3px rgba(0,31,84,.14);
}

.panel button[type="submit"]{
width:100%;
padding:16px;
border:none;
border-radius:16px;
font-size:15px;
font-weight:700;
background:var(--primary);
color:#fefcfb;
box-shadow:none;
}

.panel button[type="submit"]:hover{
transform:none;
box-shadow:none;
background:var(--primary-hover);
}

a{
display:block;
margin-top:18px;
text-align:center;
font-size:14px;
font-weight:500;
color:#6b7280;
}

a:hover{
transform:none;
color:var(--primary);
}

.switch{
position:relative;
top:auto;
left:auto;
width:100%;
height:auto;
padding:0 24px 34px;
background:#fefcfb;
color:var(--primary);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
border-radius:0;
transform:none !important;
transition:none;
}

.switch h2,
.switch p{
display:none !important;
}

.switch button{
width:100%;
max-width:none;
padding:15px;
margin-top:0;
border-radius:16px;
background:#fefcfb;
border:2px solid var(--primary);
color:var(--primary);
font-size:15px;
font-weight:700;
transition:.25s ease;
}

.switch button:hover{
background:var(--primary);
color:#fefcfb;
transform:none;
}

/* LOGIN: mostrar solo REGISTRARSE */
.wrapper:not(.modo-registro) .switch button:first-of-type{
display:block !important;
}

.wrapper:not(.modo-registro) .switch button:last-of-type{
display:none !important;
}

/* REGISTRO: ocultar todo el switch para que NO aparezca INGRESAR */
.wrapper.modo-registro .switch{
display:none !important;
}

.wrapper.modo-registro #login-panel,
.wrapper.modo-registro #registro-panel{
transform:none !important;
opacity:1 !important;
pointer-events:auto;
}

@media (max-width:380px){

body{
padding:14px;
align-items:flex-start;
}

.wrapper{
border-radius:24px;
}

.panel{
padding:30px 20px 22px;
}

.panel h2{
font-size:25px;
margin-bottom:24px;
}

input,
.panel button[type="submit"],
.switch button{
border-radius:14px;
padding:14px;
}

.btn-back{
font-size:13px !important;
margin-bottom:16px;
}

.switch{
padding:0 20px 28px;
}

}

}