:root {
    font-family: Arial, Helvetica, sans-serif;
    color: #0a2452;
    background: #fff;
}

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

.login-page, .welcome-page {
    min-height: 100vh;
    background: #fff url('../img/fondos/fondo-colibri-20.png') center center / cover no-repeat;
}

.login-panel {
    width: min(46%, 620px);
    min-height: 100vh;
    padding: clamp(36px, 6vw, 100px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.login-logo {
    display: block;
    width: min(100%, 420px);
    height: auto;
    margin-bottom: 54px;
}

.login-content { width: min(100%, 370px); }
h1 { margin: 0 0 9px; font-size: clamp(26px, 3vw, 34px); }
.login-intro { margin: 0 0 30px; color: #53637a; line-height: 1.5; }
label { display: block; margin: 0 0 8px; font-weight: 600; }

input:not([type='hidden']) {
    display: block;
    width: 100%;
    height: 48px;
    margin: 0 0 22px;
    padding: 0 14px;
    border: 1px solid #becbdd;
    border-radius: 8px;
    background: #fff;
    color: #0a2452;
    font: inherit;
}

input:focus-visible, button:focus-visible {
    outline: 3px solid #55cbe8;
    outline-offset: 2px;
}

button {
    display: block;
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    background: #0758b7;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

button:hover { background: #06499a; }

.login-error {
    padding: 12px 14px;
    border-radius: 8px;
    background: #fff1f1;
    color: #a82222;
    line-height: 1.4;
}

.welcome-page { display: grid; place-items: center; padding: 24px; }
.welcome-panel { width: min(100%, 480px); padding: 36px; background: #fff; border-radius: 14px; box-shadow: 0 12px 35px #102b5322; }
.welcome-panel img { display: block; max-width: 100%; width: 360px; margin-bottom: 35px; }
.welcome-panel p { color: #53637a; margin-bottom: 28px; }

@media (max-width: 700px) {
    .login-page, .welcome-page { background-position: 64% center; }
    .login-panel { width: 100%; padding: 32px 24px; background: #ffffffed; align-items: center; }
    .login-logo { width: min(100%, 360px); margin-bottom: 42px; }
}