:root{
    --primary:#046d64;
    --primary-dark:#003C39;
    --accent:#72d1b0;

    --background:#f5f5f5;

    --text:#202124;
    --muted:#667085;

    --border:#d0d5dd;
}
body {
    font-family: 'Roboto', sans-serif;
    background: var(--background);
    color: var(--text);
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-wrapper{
    display:flex;
    width:70%;
    height:90%;
    border-radius:15px;
    overflow:hidden;
    background:#ffffff;
    box-shadow:0 25px 60px rgba(2,6,23,0.12);
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:5%;
}

.login-left{
    /* ancho relativo dentro de la tarjeta; se ajusta cuando cambia el tamaño de la tarjeta */
    width:35%;
    display:block;
    background:linear-gradient(180deg,var(--primary-dark) 0%,var(--primary) 100%);
    color: #fff;
    padding:36px;
    justify-content:center;
    align-items:center;
}

.hero-content{
    display:flex;
    flex-direction:column;
    gap:1.2rem;
    max-width:100%;
    box-sizing:border-box;
    padding-right:1rem;
}

.hero-content h1{
    color:#fff;
    margin:0;
    font-size:clamp(20px,2.6vw,32px);
    line-height:1.04;
    white-space:normal;
    word-break:break-word;
}

.hero-content h1 span{
    color:var(--accent);
    font-weight:700;
}

.login-right{
    flex: 1 1 60%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:36px;
}

.login-card{
    width:100%;
    max-width:450px;
    background:transparent;
    border-radius:12px;
    /* padding:28px; */
}
.login-card .form-label{
    font-weight:500;
}

.login-card h2{
    margin:0 0 6px;
    font-size:34px}
.login-card h2 span{
    color:#016050}
.subtitle{
    color:var(--muted);
    margin-bottom:18px}

.input-group{
    display:flex;
    align-items:center;
    gap:12px;
    background:#fbfcfd;
    border:1px solid var(--border);
    padding:10px;
    border-radius:12px;
    margin-bottom:14px}
.input-group img{
    width:20px;
    height:20px;
    opacity:0.7}
.input-group input{
    border:0;
    background:transparent;
    flex:1;
    font-size:15px;
    padding:6px;
    outline:none}

input[type=email],input[type=password]{width:100%;font-size:15px}

.toggle-password{
    background:transparent;
    border:0;
    padding:6px;
    display:flex;
    align-items:center;
    cursor:pointer}
.toggle-password img{
    width:18px;
    height:18px;
    opacity:0.85}

.remember{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:0.95rem;
    color:var(--muted)}

.form-options{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px}

.btn-login{
    background:var(--primary);
    border:none;
    border-radius:12px;
    color:#fff;
    padding:12px 16px;
    width:100%;
    font-weight:700;
    cursor:pointer;
}

.alert-error{
    background:#fff1f2;
    border:1px solid #f8d7da;
    color:#9b1c26;
    padding:10px;
    border-radius:10px;
    margin-bottom:12px}

.security-note{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:16px;
    color:var(--muted);
    font-size:14px}
.security-note img{
    width:20px;
    height:20px;
    opacity:0.9}

.brand img {
    width: 68px;
    height: 68px}
.feature{
    display:flex;
    gap:20px;
    padding:20px 0;
    align-items:center;
    /* flex-wrap:wrap; */
}
.feature-img{
    margin:0;
    width:48px;
    height:48px;
    background:#058874;
    border-radius:7px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.feature img {
    width:28px;
    height:28px;
    filter: brightness(0) invert(1);
    padding:20px}

.feature h3{
    margin:0;
}
.feature p{
    margin:0px;
    padding:0px;
    max-width:70%;
}

@media (max-width: 900px){
    .login-wrapper{
        width:95vw;
        height:auto;
        min-width:0;
        flex-direction:column;
        margin:4vh auto;
        border-radius:12px;
    }
    .login-left{
        flex: 0 0 auto;
        width:100%;
        padding:28px;
    }
    .login-right{
        width:100%;
        padding:24px;
    }
    .hero-content{
        height:auto;
    }
}

@media (max-width: 480px){
    .hero-content h1{
        font-size:20px}
    .login-card{
        padding:20px}
}