/* Portal Grupo Mercadeo — páginas de acceso: login, recuperar y cambiar contraseña.
   Tarjeta centrada con el logo encima. Requiere base.css. */

body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1;display:flex;align-items:center;justify-content:center;padding:24px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}

.loginwrap{width:100%;max-width:380px;display:flex;flex-direction:column;gap:18px}
.brandlock{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.brandlock img{height:56px;width:auto}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;display:flex;flex-direction:column;gap:16px}
h1{font-family:var(--f-display);font-size:18px;font-weight:600;margin:0}
p{margin:0;color:var(--muted);font-size:14px}

label.f{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
.hint{font-weight:400;font-size:12px}
/* 16px evita que iOS haga zoom al enfocar el campo */
input[type=email],input[type=password],input[type=text]{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px 12px;min-height:44px;width:100%;color:var(--ink);font:inherit;font-size:16px}

.btn{border:1px solid var(--brand);background:var(--brand);color:var(--brand-ink);border-radius:9px;padding:0 14px;min-height:44px;font:inherit;font-weight:600;font-size:14px;display:inline-flex;align-items:center;justify-content:center;width:100%;text-decoration:none;cursor:pointer}
.btn:hover{opacity:.92}
.link{color:var(--muted);font-size:13px;font-weight:600;text-align:center;text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--ink)}
.foot{color:var(--muted);font-size:12px;text-align:center}

@media (max-width:420px){
  .card{padding:22px 18px}
  .brandlock img{height:48px}
}