body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.tarjeta {
  width: 100%;
  max-width: 440px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 22px;
  padding: 28px 22px;
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.sesion {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--acento2);
}
.sesion:empty { display: none; }

h1 { margin: 0 0 8px; font-size: 1.45rem; line-height: 1.25; }
.ayuda { margin: 0 0 20px; color: var(--suave); }

.aviso {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: #fecaca;
  font-weight: 600;
}

.campo { position: relative; margin-bottom: 14px; }
.campo input { font-size: 1.15rem; padding-right: 4.2em; }
.cuenta {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--suave);
  pointer-events: none;
}

form button { width: 100%; font-size: 1.1rem; padding: 0.85em; }

.mensaje { min-height: 1.6em; margin: 14px 0 0; text-align: center; font-weight: 600; }
.mensaje.ok { color: var(--ok); font-size: 1.2rem; }
.mensaje.error { color: var(--error); }