* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background: #ecf8ff url("documentos.jpg") repeat fixed;
    color: #182942;
    font: 1rem/1.5 Verdana, Arial, Helvetica, sans-serif;
}
.login {
    width: 100%;
    max-width: 460px;
    padding: clamp(20px, 6vw, 36px);
    background: #fff;
    border: 1px solid #d1d7dc;
    border-top: 5px solid #29519c;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(24, 41, 66, .16);
}
.brand { margin: 0; color: #29519c; font-size: .95rem; font-weight: bold; }
h1 { margin: 6px 0 8px; font-size: clamp(1.4rem, 5vw, 1.8rem); line-height: 1.2; }
.intro { margin: 0 0 24px; color: #45566d; font-size: .9rem; }
.field { margin: 0 0 16px; }
label { display: block; margin-bottom: 6px; font-size: .9rem; font-weight: bold; }
input, button { font: inherit; width: 100%; min-height: 44px; border-radius: 6px; }
input { padding: 9px 12px; border: 1px solid #8799ad; color: inherit; background: #fff; }
:focus-visible { outline: 3px solid #29519c; outline-offset: 3px; }
.activation { padding: 14px; margin-bottom: 20px; background: #ecf8ff; border-radius: 6px; }
.hint { margin: 8px 0 0; color: #45566d; font-size: .8rem; }
.alert {
    padding: 12px;
    margin: 0 0 18px;
    border-left: 3px solid #cc0000;
    border-radius: 4px;
    background: #fff2f2;
    color: #801616;
    font-size: .875rem;
}
button {
    padding: 10px 16px;
    border: 0;
    background: #29519c;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}
button:hover { background: #1e3d78; }
.recovery { margin: 16px 0 0; font-size: .875rem; }
.recovery a { color: #29519c; }