:root{
    --primary:#14532d;
    --primary-light:#16a34a;
    --surface:#ffffff;
    --text:#0f172a;
    --text-muted:#475569;
    --text-on-dark:#f0fdf4;
    --border:#e2e8f0;
    --radius:16px;
    --shadow:0 8px 32px rgba(15, 23, 42, 0.12);
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size:14px;
    color:var(--text);
}

.pagina_login{
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:24px;
    padding-left:max(24px, env(safe-area-inset-left));
    padding-right:max(24px, env(safe-area-inset-right));
    background:linear-gradient(135deg, #ecfdf5 0%, #bbf7d0 50%, #86efac 100%);
    background-image:
        linear-gradient(135deg, rgba(236,253,245,0.92) 0%, rgba(187,247,208,0.88) 100%),
        url('img/fondo.jpg');
    background-size:cover;
    background-position:center;
}

.contenedor{
    width:100%;
    max-width:400px;
    background:var(--surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:32px 28px;
    border:1px solid var(--border);
}

.login_brand{
    text-align:center;
    margin-bottom:28px;
}

.emblema_login{
    width:72px;
    height:auto;
    margin-bottom:12px;
}

.login_titulo{
    margin:0;
    font-size:22px;
    font-weight:700;
    color:var(--primary);
}

.login_subtitulo{
    margin:8px 0 0;
    font-size:13px;
    color:var(--text-muted);
}

.login_form{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.login_label{
    font-size:13px;
    font-weight:600;
    color:var(--text);
}

.login_label_pass{
    margin-top:4px;
}

.login_ayuda_pass{
    margin:0;
    font-size:12px;
    line-height:1.45;
    color:var(--text-muted, #64748b);
}

.txt_cuenta{
    height:44px;
    width:100%;
    border-radius:10px;
    border:1px solid var(--border);
    padding:0 14px;
    font-size:14px;
    transition:border-color 0.15s ease, box-shadow 0.15s ease;
}

.txt_cuenta:focus{
    outline:none;
    border-color:var(--primary-light);
    box-shadow:0 0 0 3px rgba(22, 163, 74, 0.15);
}

.btn_acceso{
    height:44px;
    width:100%;
    border:none;
    border-radius:10px;
    background:var(--primary);
    color:var(--text-on-dark);
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:background 0.15s ease, transform 0.1s ease;
    margin-top:4px;
}

.btn_acceso:hover{
    background:#16a34a;
}

.btn_acceso:active{
    transform:scale(0.98);
}

.pie_pagina{
    margin-top:32px;
    text-align:center;
}

.membrete{
    font-size:11px;
    color:var(--text-muted);
    line-height:1.6;
}

@media (max-width: 768px){
    .contenedor{
        max-width:100%;
        padding:28px 22px;
    }
}

@media (max-width: 480px){
    .contenedor{
        padding:24px 20px;
    }

    .login_titulo{
        font-size:20px;
    }
}