*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --negro:#111111;
    --dorado:#9a8756;
    --dorado-oscuro:#7d6d46;
    --blanco:#ffffff;
    --gris-borde:#e8e3d8;
    --texto:#5b5b5b;
    --sombra:0 20px 50px rgba(0,0,0,.12);
}

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

body{
    min-height:100vh;
    background:
        radial-gradient(circle at top right, rgba(154, 135, 86, 0.12), transparent 22%),
        radial-gradient(circle at bottom left, rgba(154, 135, 86, 0.10), transparent 20%),
        #ffffff;
    font-family:Arial, Helvetica, sans-serif;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    overflow-x:hidden;
}

.auth-wrap{
    width:100%;
    max-width:440px;
}

.auth-card{
    width:100%;
    background:#fff;
    color:var(--negro);
    padding:28px;
    border-radius:20px;
    border:1px solid var(--gris-borde);
    box-shadow:var(--sombra);
    overflow:hidden;
}

.auth-logo-box{
    width:100%;
    height:80px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    margin-bottom:18px;
}

.auth-logo{
    display:block;
    width:auto;
    max-width:180px;
    max-height:70px;
    height:auto;
    object-fit:contain;
}

.auth-card h1{
    margin-bottom:10px;
    font-size:30px;
    text-align:center;
}

.auth-card p{
    margin-bottom:18px;
    color:var(--texto);
    text-align:center;
}

.auth-card label{
    display:block;
    margin:12px 0 6px;
    font-weight:700;
}

.auth-card input{
    width:100%;
    padding:12px 14px;
    border:1px solid #d1d5db;
    border-radius:12px;
    outline:none;
    transition:.2s ease;
}

.auth-card input:focus{
    border-color:var(--dorado);
    box-shadow:0 0 0 3px rgba(154,135,86,.12);
}

.auth-card button{
    width:100%;
    margin-top:18px;
    padding:13px;
    border:none;
    border-radius:12px;
    background:var(--negro);
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.2s ease;
}

.auth-card button:hover{
    background:var(--dorado);
}

.alerta{
    margin:12px 0;
    background:#fee2e2;
    color:#991b1b;
    padding:10px 12px;
    border-radius:10px;
    font-size:14px;
}

.alerta.ok{
    background:#ecfdf3;
    color:#166534;
}

.enlace{
    margin-top:16px;
    text-align:center;
    color:var(--texto);
}

.enlace a{
    color:var(--dorado-oscuro);
    text-decoration:none;
    font-weight:700;
}

.enlace a:hover{
    text-decoration:underline;
}