/* ============================================================
   acceso.css — Entrada, recuperar y nueva contrasena.
   Hechas para el celular primero (Miguel, 2026-10-28): letra de
   16 px en los campos (el iPhone no hace zoom), campos y botones
   de 50 px de alto, y en pantalla chica la tarjeta va arriba para
   que el teclado no la tape.
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'DM Sans', system-ui, sans-serif;
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #1E293B;
}
.login-container, .container {
    background: white;
    border-radius: 16px;
    padding: 40px 36px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}
.brand { text-align: center; margin-bottom: 28px; }
.brand h1 { font-size: 24px; font-weight: 700; color: #1E293B; margin-bottom: 4px; }
.brand p { font-size: 15px; color: #64748B; }
h1 { font-size: 20px; font-weight: 600; margin-bottom: 8px; color: #1E293B; }
.subtitle { font-size: 15px; line-height: 1.45; color: #64748B; margin-bottom: 24px; }

.form-group { margin-bottom: 18px; }
label { display: block; font-size: 14px; color: #475569; margin-bottom: 8px; font-weight: 600; }
input {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    color: #0F172A;
    background: white;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
input:focus { outline: none; border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }

/* Contrasena con boton Mostrar / Ocultar adentro del campo */
.campo-clave { position: relative; }
.campo-clave input { padding-right: 92px; }
.ver-clave {
    position: absolute;
    top: 3px;
    right: 3px;
    height: 44px;
    min-width: 84px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #2563EB;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.ver-clave:hover, .ver-clave:focus-visible { background: #EFF6FF; outline: none; }

button[type="submit"], .btn-login {
    width: 100%;
    height: 50px;
    background: #1E293B;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    margin-top: 6px;
    transition: background 0.2s;
}
button[type="submit"]:hover { background: #0F172A; }
button[type="submit"]:disabled { opacity: 0.7; cursor: wait; }

.alert { padding: 12px 14px; border-radius: 10px; font-size: 15px; line-height: 1.4; margin-bottom: 18px; }
.alert-error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.alert-info { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
.alert-success { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }

.recover-link, .back-link { text-align: center; margin-top: 16px; font-size: 15px; }
.recover-link a, .back-link a {
    display: inline-block;
    padding: 12px 8px; /* area de toque comoda */
    color: #2563EB;
    text-decoration: none;
    font-weight: 500;
}
.recover-link a:hover, .back-link a:hover { text-decoration: underline; }

/* Celular: tarjeta arriba (el teclado no la tapa) y con menos margen */
@media (max-width: 480px) {
    body {
        align-items: flex-start;
        padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    }
    .login-container, .container { margin-top: 6vh; padding: 28px 20px; border-radius: 14px; }
    .brand { margin-bottom: 24px; }
}