/* Estilos compartidos de las páginas de acceso (forgot / reset). Mismo look que el login. */
:root {
  --login-bg: #0F1117; --login-card: #181B25; --login-border: #2A2E3F;
  --login-text: #E8EAF0; --login-muted: #8B90A5; --login-input-bg: #0F1117;
  --login-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
[data-theme="light"] {
  --login-bg: #F4F6FA; --login-card: #FFFFFF; --login-border: #E2E8F0;
  --login-text: #0F172A; --login-muted: #475569; --login-input-bg: #FFFFFF;
  --login-shadow: 0 8px 40px rgba(15,23,42,0.10);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'DM Sans', sans-serif; background: var(--login-bg); color: var(--login-text);
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px;
}
.login-card {
  background: var(--login-card); border: 1px solid var(--login-border); border-radius: 16px;
  padding: 40px; width: 380px; max-width: 92vw; box-shadow: var(--login-shadow);
}
.task-lockup { display: inline-flex; align-items: center; gap: 12px; }
.task-mark { width: 46px; height: 46px; display: block; }
.task-word { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--login-text); line-height: 1; }
.logo-area { text-align: center; margin-bottom: 28px; }
.logo-area h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; margin-top: 12px; }
.logo-area p { font-size: 13px; color: var(--login-muted); margin-top: 6px; line-height: 1.5; }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-size: 12px; font-weight: 600; color: var(--login-muted);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em;
}
.form-group input {
  width: 100%; padding: 10px 14px; background: var(--login-input-bg); border: 1px solid var(--login-border);
  border-radius: 8px; color: var(--login-text); font-family: 'DM Sans', sans-serif; font-size: 14px;
  outline: none; transition: border 0.2s;
}
.form-group input:focus { border-color: #0099FF; }
.btn-login {
  width: 100%; padding: 12px; margin-top: 8px; background: #0099FF; color: #fff; border: none;
  border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.2s;
}
.btn-login:hover { background: #0077CC; }
.error-msg {
  background: rgba(220,0,130,0.10); border: 1px solid rgba(220,0,130,0.30); color: #DC0082;
  padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; text-align: center;
}
.notice-msg {
  background: rgba(0,153,255,0.10); border: 1px solid rgba(0,153,255,0.30); color: #0099FF;
  padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; text-align: center;
}
.auth-link { color: var(--login-muted); font-size: 13px; text-decoration: none; transition: color 0.2s; }
.auth-link:hover { color: #0099FF; }
.auth-foot { text-align: center; margin-top: 14px; }
/* Firma "hecho con <emoji> por Mitocondria" (espejo del ecom) */
.mito-sign {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
  text-transform: lowercase; letter-spacing: 0.05em; color: #444444;
}
[data-theme="light"] .mito-sign { color: #999999; }
.mito-emoji { font-size: 14px; display: inline-block; }
.mito-emoji.pop { animation: mitoPop 0.35s ease; }
@keyframes mitoPop { 0% { transform: scale(0.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.mito-link { display: inline-flex; align-items: center; margin-left: 2px; transition: opacity 0.2s; }
.mito-link:hover { opacity: 0.7; }
.mito-link img { height: 19px; width: auto; }
.sign-logo-light { display: none; }
.sign-logo-dark { display: block; }
[data-theme="light"] .sign-logo-light { display: block; }
[data-theme="light"] .sign-logo-dark { display: none; }